1

コメントのリストを含む todo のテンプレートがあります。各 todo には、localstorage にコメントの配列 "comments" があります。すべての todo を取得し、各 todo の「コメント」配列を反復処理して、すべてのコメントを対応する todo に割り当てたいと考えています。正しいコメントリストに追加するにはどうすればよいですか?

現在、次のような出力が得られます。

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 ビュー:

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

そのtodoアイテムに固有のものだけが必要な場合$('ul.comment-list')は、すべてが見つかります。<ul class="comment-list"><ul>

あなたは#todo-template2つの部分に分割する必要があります:

<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 : []
  }
});

コメントは、TodoModel のすべてのインスタンスで常に使用される配列です。デフォルトを次のように変更します。

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

更新、jQuery のセレクターのスコープに問題があるようです: 現在のビューの DOM 要素のみを使用していることを確認するには、これを使用します。通常の jQuery 呼び出しの代わりに、例: this.$('ul.comment-list')

于 2012-07-10T20:29:49.747 に答える