javascript - 未捕获的 TypeError : Cannot call method 'replace' of undefined backbone. js

标签 javascript html templates backbone.js underscore.js

我正在尝试使用backbone.js 开发一个简单的RSS 应用程序。我正在使用这个backbone.js tutorial .在定义模板时,我在第 2 行(模板)上收到以下错误。 谁能告诉我为什么教程中定义了 tagName: "li"?

uncaught TypeError: Cannot call method 'replace' of undefined backbone.js

JavaScript

window.SourceListView = Backbone.View.extend({
    tagName:"li",
    template: _.template($('#tmpl_sourcelist').html()),

    initialize:function () {
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);
    },

    render:function (eventName) {
        $(this.$el).html(this.template(this.model.toJSON()));
        return this;
    },

    close:function () {
        $(this.el).unbind();
        $(this.el).remove();
    }
});

HTML

 <script type="text/template" id="tmpl_sourcelist">
                        <div id="source">
                        <a href='#Source/<%=id%>'<%=name%></a>
                        </div>
                </script>

谢谢

最佳答案

你的错误就在这里:

template: _.template($('#tmpl_sourcelist').html()),

_.template 的部分内部结构涉及调用 String#replace关于生成已编译模板函数的方式的未编译模板文本。该特定错误通常意味着您实际上是在说:

_.template(undefined)

当你说 $('#tmpl_sourcelist').html() 时,如果 DOM 中没有 #tmpl_sourcelist,就会发生这种情况。

有几个简单的解决方案:

  1. 调整您的 <script> 顺序,以便您的 #tmpl_sourcelist 在您尝试加载 View 之前出现。
  2. 在 View 的 initialize 中创建编译后的模板函数,而不是在 View 的“类”定义中:

    window.SourceListView = Backbone.View.extend({
        tagName:"li",
        initialize:function () {
            this.template = _.template($('#tmpl_sourcelist').html());
            //...
    

tagName 而言,fine manual有话要说:

el view.el

[...] this.el is created from the view's tagName, className, id and attributes properties, if specified. If not, el is an empty div.

所以在你看来:

tagName: 'li'

意味着Backbone会自动创建一个新的

  • 元素作为你 View 的el

  • 关于javascript - 未捕获的 TypeError : Cannot call method 'replace' of undefined backbone. js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14826149/

    相关文章:

    javascript - 在 ipad 上的 Safari 中消失的元素

    javascript - 阻止对 native Webview进行响应以访问YouTube网站

    javascript - 如何为下拉菜单添加滚动条

    html - 使用 css 选择器 lastchild 和 :after together in angular2

    javascript - 在 ng-if 中的元素上设置监视

    javascript - Yii renderPartial 与外部 javascript

    html - 圆形复选框在移动设备上无法正常工作

    C++ 函数解析选择模板版本而不是普通函数

    c++ - 隐藏我的.exe中的纯文本字符串

    c++ - 必须在模板中指定 typename 吗?