Question

我有一个带有评论列表的待办事项模板。每个待办事项都在localstorage中有一个评论数组“评论”。我获取所有待办事项，遍历每个待办事项的“注释”数组，我希望将所有注释分配给相应的待办事项。如何附加到正确的评论列表？

目前我得到的输出如下：

Post1
  Comment1_Post1
  Comment2_Post1
  Comment1_Post2
  Comment2_Post2
Post2
  Comment1_Post2
  Comment2_Post2

Edit1：新的CommentCollectionView

 render: function() {  
        this.$el.html(this.template());
        var commentList = this.$("ul.comment-list");
        this.collection.each(function(comment) {
            var commentView = new CommentView({model: comment});
            commentList.append(commentView.render().el);
        });            
        return this;
    },

HTML：

<body>
<div class="content">
   <ul class="todos-list"></ul>
</div>

// Templates
 <script type="text/template" id="todo-template">    
          <label class="todo-content"><%= content %></label>
          <ul class="comment-list" style="margin-left: 2em"></ul>
</script>

<script type="text/template" id="comment-template">    
          <label class="comment-content"><%= content %></label>      
</script>

Todo View：

var TodoView = Backbone.View.extend({
     tagName: "li",
     template: _.template($("#todo-template").html()),     
     events: {
         "click button.addComment": "addComment"      
     },    
     initialize: function() {
         _.bindAll(this, "render");        
         this.model.bind("change", this.render);        
         var commentsArray = this.model.get("comments");          
         var commentCollection = new CommentCollection();
         commentCollection.add(commentsArray); 
         var commentCollectionView = new CommentCollectionView({model: commentCollection});       
     }
  });

评论集合视图：

 var CommentCollectionView = Backbone.View.extend({
    initialize: function() {
         _.bindAll(this, "render", "appendItem", "addAll", "renderComment");
         this.model.bind("reset", this.addAll);
         this.model.bind("change", this.render);             
         this.model.bind("add", this.appendItem);            

         this.model.trigger("reset");
    },
    addAll: function() {
         this.model.each(this.appendItem);
    },        
    appendItem: function(comment) {                    
        var commentView = new CommentView({model: comment}); 
        $("ul.comment-list").append(commentView.render().el);    
   }    
});

Answer 1

我认为你的问题就在这里：

appendItem: function(comment) {                    
    var commentView = new CommentView({model: comment}); 
    $("ul.comment-list").append(commentView.render().el);    
}

当您只想要该待办事项目的特定$('ul.comment-list')时，<ul class="comment-list">会找到所有<ul>。

您应该将#todo-template分成两部分：

<script type="text/template" id="todo-template">    
    <label class="todo-content"><%= content %></label>
</script>
<script type="text/template" id="comments-template">
    <ul class="comment-list" style="margin-left: 2em"></ul>
</script>

然后使用#comments-template作为CommentCollectionView的模板：

var CommentCollectionView = Backbone.View.extend({
    template: _.template($("#comments-template").html()),
    render: function() {
        this.$el.html(this.template());
        return this;
    },
    //...
});
var TodoView = Backbone.View.extend({
    //...
    render: function() {
        this.$el.html(this.template(...));

        // Use 'collection' here, not 'model'
        var c = new CommentCollectionView({collection: commentCollection});       
        this.$el.append(c.render().el);
        return this;
    }
});

然后您的appendItem变为：

appendItem: function(comment) {                    
    var commentView = new CommentView({model: comment}); 
    this.$el.append(commentView.render().el);
}

这应该将CommentView置于右侧<ul>。

Answer 2

问题在于TodoModel的定义，你没有粘贴它的代码，但是我可以假设这个问题，这是作为对象的数据类型的常见问题。

TodoModel具有您以默认方式定义的属性：

var TodoModel = Backbone.Model.extend({
  defaults : {
     //some
     comments : []
  }
});

因此，注释是一个始终在所有TodoModel实例中使用的数组。将默认值更改为：

var TodoModel = Backbone.Model.extend({
  defaults : function(){
     return {
       //some
       comments : []
     }
  }
});

更新，因为似乎是jQuery选择器范围的问题：要确保仅使用当前视图的DOM元素，请使用此元素。而不是正常的jQuery调用，例如：this。$（'ul.comment-list'）

迭代集合中的数组并在Backbone.js中显示

2 个答案: