1

サイトにモデルを表示するには 2 つの異なる方法があり、もちろん異なるビューでそれらを処理します。

ただし、特定のモデルのビューの 1 つでイベントが発生したときに、他のビューでもイベントをトリガーできるように、これらのビューを何らかの方法で接続できるようにしたいと考えています。

ul簡単にするために、コレクションがあり、同じリストを生成する 2 つのビューでコレクションを表すとしましょう。（実際には、もちろん見解は異なります）。

HTML

<ul class="view-a">
    <li class="subview-a">Model 1</li>
    <li class="subview-a">Model 2</li>
</ul>

<ul class="view-b">
    <li class="subview-b">Model 1</li>
    <li class="subview-b">Model 2</li>
</ul>

背骨

viewA = Backbone.View.extend({
    tagName: 'ul',
    className: 'view-a',
});

viewB = Backbone.View.extend({
    tagName: 'ul',
    className: 'view-b',
});

subViewA = Backbone.View.extend({
    tagName: 'li',
    className: 'subview-a',
    events: {
         'mouseover':'over',
    },
    over: function() {
        console.log('mouse over on A');
    }
});

subViewB = Backbone.View.extend({
    tagName: 'li',
    className: 'subview-b',
    events: {
        'mouseover':'over',
    },
    over: function() {
         console.log('mouse over on B');
    },
});

同じサブビューを持っていないのはなぜですか? この例では、両方のサブビューはliですが、実際の実装ではありません。

subview Bでは、 の上にマウスを置いたときにマウスオーバー イベントをトリガーするにはどうすればよいsubview Aでしょうか。

4

1 に答える 1

2

Backbone のイベント モデルと通信します。私がこれを言うとき、私を信じてください。ただし、Backbone を使用する場合は、モジュラー アプローチを選択してみてください。つまり、各ビューは関連している場合でも、別のビューに依存するべきではありません。テストが非常に困難になるだけでなく、デバッグが困難になり、スパゲッティ コードが生成されます。この記事を見てください。ビューがバックボーンのイベント モデルを使用して相互に通信する方法について説明します。PubSub パターンに精通している必要があります。この質問も関連しています。

アップデート！だから私があなたの例を取るなら

var vent = _.extend({}, Backbone.Events);

subViewA = Backbone.View.extend({
    tagName: 'li',
    className: 'subview-a',
    initialize: function () {
        vent.on('my-event', this.over, this);
    },
    events: {
         'mouseover':'over',
    },
    over: function(dataRecieved) {
        console.log('mouse over on A');
    }
});

subViewB = Backbone.View.extend({
    tagName: 'li',
    className: 'subview-b',
    events: {
        'mouseover':'over',
    },
    over: function() {
         vent.trigger('my-event', "data you would like to pass");
    },
});
于 2012-06-28T14:47:01.937 に答える