0

これは次のような簡単な例です。

アバターはたくさんあり、毎回選択できるアバターは1つだけです。

モデル「アバター」、コレクション「アバター」、モデルのビュー「アバタービュー」があります。また、アプリビューのレンダリングを担当する「AvatarAppView」という名前のビューがあります。

私の実装は次のとおりです。

1つのアバターを選択すると、モデルのビュー「AvatarView」でクリックイベントがトリガーされ、選択されますが、他のモデルの選択を解除することはできません。

良い解決策はありますか？ありがとうございました。

4

1 に答える 1

0

バックボーンビューがBackbone.Events混在しているため、ビューは独自のイベントを生成でき、他のビューはそれらのイベントをリッスンできます。したがって、AvatarView選択されたときにイベントをトリガーできます。

select: function() {
    // Mark this avatar as selected...
    this.trigger('selected', this);
},
unselect: function() {
    // Undo the "mark this avatar as selected" from above.
}

次に、AvatarAppViewこれらのイベントをリッスンできます。

initialize: function() {
    _.bindAll(this, 'selected');
    //...
},
render: function() {
    this.kids = [ ];
    this.collection.each(function(m) {
        var v = new AvatarView({ model: m });
        v.on('selected', this.selected);
        this.kids.push(v);
        this.$el.append(v.render().el);
    }, this);
    return this;
}

次に、他のsの選択を解除するselectedための単純なイベントハンドラー：AvatarAppViewAvatarView

selected: function(v) {
    _.chain(this.kids).reject(function(k) { return k == v }).invoke('unselect');
}

デモ： http： //jsfiddle.net/ambiguous/thRHK/

于 2012-07-21T02:14:13.123 に答える