0

I'm currently learning backbone.js, still in the very beginning but I'm getting the error:

Uncaught TypeError: Cannot call method 'html' of undefined

on the line this.$el.html( template );

<body>
                <div id="search_container"></div>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
                <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
                <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
                <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
                <script type="text/template" id="search_template">
                        <label>Search</label>
                        <input type="text" id="search_input" />
                        <input type="button" id="search_button" value="Search" />
                </script>
                <script type="text/javascript">
                        $(document).ready(function()
                        {

                                SearchView = Backbone.View.extend({
                                initialize: function(){
                                        this.render();
                                },
                                render: function(){
                                        // Compile the template using underscore
                                        var template = _.template( $("#search_template").html(), {});
                                        // Load the compiled HTML into the Backbone "el"
                                        this.$el.html( template );
                                }
                                });

                                var search_view = new SearchView({ el: $("#search_container") });
                        });
                </script>
        </body>

Why is this error occuring?

4

2 回答 2

1

您正在将视图的 el 元素设置为

new SearchView({ el: $("#search_container") });

但是您的 html 中没有任何地方已经存在该元素。这是错误的原因，因为以这种方式定义 el 意味着您已经在页面上存在该元素并将该元素分配为视图的容器。

要么将该元素添加到HTML或编辑它，如下所示

new SearchView();

这样el默认情况下将回退到 div 。

于 2013-05-20T02:50:03.457 回答
-1

当您在 javascript 代码中引用 DOM 元素时，该元素必须已经可用 - JS 代码应该在该元素创建后运行。在这里，#search_container您分配给视图字段的 divel是在脚本执行后创建的。为避免此类问题，请使用 jQuery 的ready方法：

$(document).ready(function()
{
    SearchView = Backbone.View.extend({

        // ...

    });

    // ...
});

在创建 HTML 文档并且所有元素都可以使用之后，此方法运行作为参数传递的函数。

此外，您使用的主干版本似乎不会自动管理$el属性的值。如果您需要使用此版本，请更新如下initialize方法：

initialize: function()
{                                  
    this.$el = $(this.el);
    this.render();
},

这将手动设置$el为所需的值。

于 2013-05-20T00:18:58.797 回答