0

私は Backbone (および Marionette) を初めて使用し、両方を使用して非常に単純なアプリを作成しようとしています。アプリには、左側のナビゲーションに「グループ」のメニューがあり、メインの右側の div に「エントリ」のリストがあります。グループ メニュー項目がクリックされるたびに、グループ ID でエントリをフィルタリングして表示し、他のすべてを非表示にします。

これが Entry Item ビューです (すべてのスクリプトは CoffeeScript にあります):

class EntryItemView extends Backbone.Marionette.ItemView
    tagName: 'tr'
    template: _.template $('#entryItemTemplate').html()

    render: ->
        @$el.html @template(@model.toJSON())

    show: ->
        @$el.show()

    hide: ->
        @$el.hide()

以下は、Marionette の CollectionView を拡張した Entry List ビューです。

class EntryListView extends Backbone.Marionette.CollectionView
    itemView: EntryItemView
    el: '#main tbody'

これは AppRouter で、かなり単純です。

class AppRouter extends Backbone.Router
    routes: 
        'group/:id' : 'showGroup'

router = new AppRouter()
router.on 'route:showGroup', (id) ->
    _.each entryViews, (view) ->
        if view.model.get('group_id') is parseInt(id)
            view.show()
        else 
            view.hide()

(entryViews変数は、すべての EntryItemView インスタンスを格納する単純なグローバル配列です)。

このアプローチでは、アプリを /group/:id に移動すると、実際に各 EntryItemView オブジェクトの show() および hide() メソッドが呼び出されます。問題は、このオブジェクトと実際の HTML の間の参照が存在しないように見えるため、実際の要素<tr>が表示または非表示にならないことです。

ここで私が間違っていることを指摘できますか？前もって感謝します。

4

1 に答える 1

1

ここにいくつかのポインタがあります：

  • テンプレートは HTML にあるため、jQuery セレクターを次のように指定するだけです。template: "#entryItemTemplate"
  • renderMarionette は独自にそれを行うため、宣言を削除できます (つまり、デフォルトの動作を実装しています)。
  • 何をしているのかわからない場合は、通常el、コレクション ビューでプロパティを宣言しません。show代わりに、メソッドを呼び出してビュー インスタンスを表示する領域 (おそらくレイアウト内) を宣言します。

あなたのコードがうまくいかない理由は、バックボーン コードにいくつかのマリオネット要素が組み込まれているように見えるからです。マリオネットに関する私の本の無料サンプルを見てください。マリオネットをすぐに使い始めることができ、ここで達成しようとしていることのほとんどが説明されています。

于 2013-10-21T14:17:51.130 に答える