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

Question

我在.js文件中有一个视图，除了'index.html'文件，它看起来像这样：

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的ready函数在'index.html'中分配这个视图：

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

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

正如您可能猜到的那样，“呈现”不会出现在DOM上。 问题是，当我将所有东西打包在一起时（标签中的视图和分配），它可以工作。

有任何想法吗 ？

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需要创建视图的$el时， $('#article')会找到一些东西。

演示（有效）： http ： //jsfiddle.net/ambiguous/Vd6jP/