0

サーバーサイドのピボットテーブルを使用して実装された2つのbackbone.jsモデルと多対多の関係があります。私はそれをクライアントサイドで構築する方法を理解しようとしています。現在の構造は次のとおりです
。1）タグモデルと、チェックボックスとタグラベルをレンダリングするTagViewがあり、チェックボックスにチェック済みのイベントがあり、現時点では何も実行されていません。

  • たくさんのタグを保持するTagsCollectionがあります。
  • 私はTagsCollectionViewを持っています。これは、TagsCollectionのadd、resetなどをバインドし、追加されたタグのTagViewを追加してレンダリングし、現在のhtmlにhtmlを追加します（リセットすると、htmlはリセットされます）。
  • 可能なすべてのタグを含むグローバルTagCollectionインスタンスがあります
  • initにselectedtagsと呼ばれる（空の）TagCollectionを含むNotesモデルがあります。
  • サーバーは、Notesごとに選択されたtagidの配列を返します。これは、TagCollectionに追加します。
  • ここで難しい部分があり、すべてを結び付けます。私のNotesViewには、グローバルTagsCollectionにバインドされた独自のTagsCollectionViewがあります（すべてのタグを一覧表示できます）。次に、そのチェックボックスでチェック済みイベントを取得するにはどうすればよいですか。このNotesモデルの選択されたタグへの追加をトリガーするサブTagViews ？このNotesモデルインスタンスへの参照をinitのTagsCollectionViewに提供する必要があります。これにより、作成されるすべてのTagViewにそれが提供され、そのcheckedイベントがそのモデルからアイテムを追加/削除しますか？それが私がこれを行う方法を理解するための最良の方法です、他の考えがあれば幸いです。
4

1 に答える 1

0

ビューはモデルの視覚的表示専用です。詳細については、TagsCollectionViewの必要性を指定してください。

  1. チェックボックスをオンにするには、変更イベントを使用します。
  2. インクリメンタルコーディングをお勧めします。最初にTagとTagViewを操作します。動作するように、タグを保持するコレクションを追加し続けます。その後、メモを追加できます。それは「分割統治法」です:)
  3. デザイン全体と混同しないでください。最初は非常にシンプルです。

要件の詳細が不足しているため、デザイン全体を提供することはできません。しかし、以下のコードはあなたのデザインの出発点をトリガーするはずだと思います。

var TagsCollectionView=Backbone.View.extend({
 el:$(), 
});

var Tag=Backbone.Model.extend({
  defaults:{
   // define the default properties
  }
});

var TagView=Backbone.View.extend({
  el:$("body"),
  events:{
   'change #checkBox':'customFunction'
  },
  initialize: function(){
   _.bindAll(this, 'render','customFunction');
   this.render();   
  },  
  render:function(){
   var tag=new Tag();
   // code to render the checkbox and label
  },
  customFunction:function(){
   // whatever you want to do after checking event of checkbox
  }
});

// collection to collect all the tags
var TagCollection=Backbone.Collection.extend({
  model:Tag
});

var Notes=Backbone.Model.extend({
  defaults:{
   'tagCollection':TagCollection
  }
});

// you do not require TagsCollectionView
于 2012-01-23T12:53:08.570 に答える