javascript - 多文件 backbone.js 应用程序似乎不起作用

Question

除了“index.html”文件之外，我在 .js 文件中有一个 View ，如下所示:

window.App = Backbone.View.extend({
        el: $('#article'),

        initialize: function() {
            _.bindAll(this, 'render');
            console.log('binding');
            console.log($('#article'));
            this.render();
        },

        render: function() {
            console.log('rendering');
            this.$el.html("rendered");
            return this;
        }
    });

我正在使用 JQuery 的就绪函数在“index.html”中分配此 View :

<div id="article">
</div>

<script type="text/javascript">
    $(function(){
        console.log($('#article'));
        new window.App();
    });
</script>

正如您可能猜到的，“已呈现”并没有出现在 DOM 上。问题是当我将所有东西打包在一起时(标签中的 View 和分配)，它起作用了。

有什么想法吗？

Answer 1

我认为你的问题在于:

window.App = Backbone.View.extend({
    el: $('#article'),

发生在这个 HTML 之前:

<div id="article">
</div>

被浏览器看到。这将使 $('#article') 为空，并且您的 render 方法将无法访问 DOM 中的任何内容。打开你的控制台并运行这个演示，你会看到你所看到的:http://jsfiddle.net/ambiguous/7sGcZ/

最简单的解决方案是将选择器用作el:

window.App = Backbone.View.extend({
    el: '#article',

然后让 Backbone 将它自己变成一个 DOM 元素。这样，当 Backbone 需要创建 View 的 $el 时，$('#article') 会找到一些东西。 .

演示(有效):http://jsfiddle.net/ambiguous/Vd6jP/