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元素。这样，$('#article')会在Backbone需要创建视图$el时找到一些内容。

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

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

1 个答案: