明確な質問から始めて、後で説明します:
に含まれるモデルを に適切にカプセル化するCompositeView方法ItemView
私の問題は単純ですが、うまく機能させることができません。ノートの木があります。各メモは Backbone.model であり、@descendantsコレクションがあります。次に、そのツリー (@descendants がインスタンス) を表す Backbone.Collection がCollectionViewありitemViewますCompositeView。すべてが完璧にレンダリングされ、私はそれについて非常に満足していました. この実用的なソリューションは、コードの最初のスニペットに示されています!
ここで問題が発生します。これに基づいて、私はちょっとこの問題に遭遇しました:イベントが どのようにバインドされているかを理解する階層全体に対してイベントが発生しました。最初は、一意のセレクターを追加しただけで (data-guid を html 要素に追加して、それで取得できるようにしました)、問題なく機能しましたが、既に「ハッキー」になっていました。しかし、他の同様の問題が発生したため、これに対する解決策が必要であると判断しました。そこで、各モデルを ItemView にカプセル化し、Composite ビューを使用してそれらを再帰的にレンダリングしましょう、と myslef に伝えました。しかし...これはすべての世界で最高ではありません...
これが私が最初に持っていたものです：
class Note.ModelView extends Marionette.CompositeView
template: "note/noteModel"
id: "note-item"
itemViewContainer: ".note-descendants"
ui:
noteContent: ".noteContent"
events:
"keypress .noteContent": "createNote"
"click .destroy": "deleteNote"
# ...
initialize: ->
@collection = @model.descendants
# ...
class Note.CollectionView extends Marionette.CollectionView
id: "note-list"
itemView: Note.ModelView
initialize: ->
@listenTo @collection, "sort", @render
今、モデルのレンダリングに属するすべてのものを新しい ItemView に転送しました
class Note.ModelView extends Marionette.ItemView
template: "note/noteModel"
ui:
noteContent: ".noteContent"
events: ->
guid = @model.get 'guid'
events = {}
events["keypress #noteContent#{guid}"] = "createNote"
events["blur #noteContent#{guid}"] = "updateNote"
events["click #destroy#{guid}"] = @triggerEvent 'deleteNote'
initialize: ->
@bindKeyboardShortcuts()
@listenTo @model, "change:created_at", @setCursor
class Note.TreeView extends Marionette.CompositeView
template: "note/parentNote"
itemView: Note.ModelView
initialize: ->
@collection = @model.descendants
@listenTo @collection, "sort", @render
_.bindAll @, "renderItem"
renderItem: (model) ->
if model.get('parent_id') is 'root'
itemView = new Note.ModelView model: model
itemView.render()
@$el.append itemView.el
onRender: ->
@collection.each this.renderItem
@renderItem @model
appendHtml: (collectionView, itemView) ->
@model.descendants.each (note) =>
iv = new Note.ModelView model: note
iv.render()
@.$('.note-descendants').append iv.el
class Note.CollectionView extends Marionette.CollectionView
id: "note-list"
itemView: Note.TreeView
initialize: ->
@listenTo @collection, "sort", @render
および noteMode テンプレート (parentNote は現在空のテンプレートです)
<button class="btn btn-danger btn-xs untab">UN</button>
<button class="btn btn-success btn-xs tab">TAB</button>
<div class="noteContent">{{{indent}}}{{{title}}}</div>
<button class="destroy"></button>
<div class="note-descendants"></div> # That is where I'm putting the children notes
したがって、これはほとんど機能しています。しかし、それはハッキーで、..まあ、まだうまくいきません。私はすべてのドキュメントを読んでおり、ネストされた構造の Derick Bailey と Nested Views の CompositeViewとDavid Sulcの 2 つのリンクを読みましたが、まだ重要な詳細が欠けていると感じています。
私が探しているのは、答えとして、マリオネットでこれを管理するためのヒントまたは一般的な方法です。これはアプリが構築される角度のある部分の1つになるため、私は本当にきれいなものを探しています。
多分私は間違った場所を探していますか？どんなことでも大歓迎です!! どうもありがとうございました
素敵な夜をお過ごしください。お時間をいただきありがとうございます。