为什么我的 Backbone.js 片段找不到 DOM 模型？

Question

看一下下面的代码片段：

<script>
$(function(){

    var to_username = "alex";

    window.Persona = Backbone.Model.extend({

    }); 

    window.PersonaList = Backbone.Collection.extend({
        model:Persona,
        url:function(){
            return '/js/personas/approval/user?to_username=' + to_username;
        }
    }); 
    window.Personas = new PersonaList;

    window.CheckView = Backbone.View.extend({
        tagName:'div',
        template: _.template($("#checkbox_friends").html()),
        initialize: function(){
            this.model.bind('change', this.render, this);
        },
        render:function(){
            $(this.el).html(this.template({}));
            return this;
        }
    }); 

    window.AppView = Backbone.View.extend({
        el:$("#add_friend_holder"),
        coreTemplate: _.template($("#add_friend_templ").html()),
        initialize:function(){ 
            this.render();
            Personas.bind('reset', this.addAllBoxes, this);
            Personas.bind('all',this.render, this);
            Personas.fetch({
                success:function(){ 
                },
                error:function(){
                }
            });  
        },
        addOneBox:function(persona){
            var check_view = new CheckView({'model':persona});
            this.$("#friend_ticker").append(check_view.render().el); //DOESNT APPEND!!!
        },
        addAllBoxes:function(){
            Personas.each(this.addOneBox);
        },
        render:function(){
            this.el.html(this.coreTemplate({}));
        }
    });
    window.App = new AppView;
});

</script>

<div id="add_friend_holder"></div>

<style>
    #friend_ticker{
        padding:6px;
        border:1px solid #ccc;
        background:#fff;
        width:200px;
    }
</style>
<script type="text/template" id="add_friend_templ">
    <button class="btn danger">Add Friend</button>
    <div id="friend_ticker">

    </div>
</script>
<script type="text/template" id="checkbox_friends">
    <input type="checkbox">
    Print this
</script>

除了一行之外，一切正常：

this.$("#friend_ticker").append(check_view.render().el);

如果我 console.log(check_view.render().el) ....一切都很好。

除此之外，我的脚本找不到 this.$("#friend_ticker")，即使它就在那里。我没有看到屏幕上打印任何内容。

Answer 1

当您绑定到两个 Collection 事件时，您是否会在 fetch 后渲染视图 2 次。

Personas.bind('reset', this.addAllBoxes, this);
Personas.bind('all',this.render, this);

第一次调用用子模板填充视图。然后第二个将父级再次呈现为空。

Answer 2

ProTom 是正确的，因为视图被渲染了两次。也许您可能想绑定到集合“add”事件而不是“all”。

这是 jsfiddle 作为视图呈现的示例，我手动将一个项目添加到列表中并绑定添加事件的集合。另外，我注释掉了

   Personas.bind('all',this.render, this); 

如果您取消注释该行，您将看到渲染事件被触发两次并“擦除”div 的内容