Marionette - 親にクラスを追加するItemView tagname

Question

私はブートストラップアコーディオンパネルを使用しており、親にpanelのクラスを追加したいと考えています。panel-collapseです。

基本的には、ここで

if (child element) hasClass('panel-collapse.in') { 
    this.addClass('open') 
} else { 
    this.removeClass('open') 
} 

が私のjsの抜粋であるだけでなく、私はコードが働くだろうと思ったかの盲目の目に行く：

return Marionette.ItemView.extend({ 
    tagName: 'li', 
    className: "panel panel-default", 
    template: panelTpl, 
    events: { 
     ... 
     'click .panel-collapse': '_panelChange', 
}, 

_panelChange: function() { 
    if(element.has('div.in').length != 0) { 
     element.addClass('open'); 
     console.log('panel opened fool'); 
    } else { 
     element.removeClass('open'); 
     console.log('panel closed fool'); 
    } 
}, 

私が提供するこのソリューションを追いましたここに：Using jquery on Marionette itemView to addClass to this.$el

しかし、役に立たない。

eventsとmodelEventsの間に違いはありますか？

はい、ビューのイベントとモデルの間に差がある私は、私はそれが書かれるべきかを正確に私のコードを入れて、または必要がある場所を正確にわからないのですが、私はそれがevent

Answer 1

内にあるべきであると仮定イベント。次のようなビューのイベントにハンドラーをバインドする場合：

events: { 
    'click .panel-collapse': '_panelChange' 
}, 

次に、DOMで発生するイベントについて説明します。モデル上での変更などが発生した場合、そのモデル上のイベントが発生します。あなたのケースでは、モデルは使用されていません。

ここでは、_panelChangeの機能を解決する方法を示します。

使用しているアプローチはデータ駆動型ではありません（モデルを使用していない）ので、そのことを検討してください。あなたはこのような何かを考えることができるアプローチを駆動し、より多くのデータで

：

1）セットアップアコーディオンの各項目のためのモデル。これは、{label: 'My accordion item 1', open: false}のようないくつかの異なるものを必要とするでしょう。

2）ユーザーがアコーディオンアイテムをクリックすると、クリックイベントハンドラはモデルthis.model.set('open', true);を更新します。ビューはモデルの変更を聴く必要があるため、非アクティブにすると、自身を更新する必要があります（openクラスを削除する）。このようにthis.listenTo(this.model, 'change:open', this.toggleMe)。

3）すべてのアコーディオンモデルを処理するコレクションは、モデルのopenプロパティが変更されたというイベントを受け取ります。その後、古いopenモデルをfalseに設定した他のすべてのモデルを更新します（閉じます）。

このようにして、コレクションとモデル（データ駆動型）ではすべての状態の更新が行われ、ビューはそれらをリッスンして更新します。ただし、アイテムビューのクリックハンドラは、クリックした