1

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

目前我得到这样的输出：

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>

待办事项视图：

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);    
   }    
});
4

2 回答 2

3

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

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>。

于 2012-07-10T19:01:32.623 回答
2

问题出在 TodoModel 的定义中，您没有粘贴它的代码，但我可以假设问题是对象数据类型的常见问题。

TodoModel 具有您以这种方式在默认值中定义的属性：

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

因此，comments 是一个始终在所有 TodoModel 实例中使用的数组。以这种方式更改您的默认值：

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

更新，因为似乎是 jQuery 选择器范围的问题：为了确保您只使用当前视图的 DOM 元素，请使用 this. 而不是普通的 jQuery 调用，例如：this.$('ul.comment-list')

于 2012-07-10T20:29:49.747 回答