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) ....这一切都很好。

除了，我的脚本找不到这个。$（“＃friend_ticker”），即使它就在那里。我没看到屏幕上印有任何东西。

Answer 1

当您绑定到两个Collection事件时，可能是在获取后呈现视图2次。

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

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

Answer 2

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

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

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

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

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

2 个答案: