backbone.jsビューelを動的に割り当てる適切な方法

Question

それぞれが異なるel属性を持つ2つ（またはそれ以上）のビューインスタンスを作成し、backbone.jsビューのイベントハッシュ（jQuery経由ではありません） 。すべてのインスタンスが同じelを持っている場合に発生させるイベントを取得

は簡単です：

someView = Backbone.View.extend({ 
    el: '#someDiv', 

    events: { 
    'click': 'someFunction' 
    }, 

    someFunction: function(){ 
    //Do something here 
    } 
}); 

これまでのところ、私はinitialize機能でelを割り当て、通常eventsを設定し、次のように、イベントがトリガしていない場合：

：

someView = Backbone.View.extend({ 
    events: { 
    'click': 'someFunction' 
    }, 

    initialize: function(options){ 
    this.el = options.el 
    }, 

    someFunction: function(){ 
    //Do something here 
    } 
}); 

私の最初の本能はelが関心のDOM要素の文字列表現を返す関数である持っていることでした

someView = Backbone.View.extend({ 
    el: function(){ 
    return '#someDiv-' + this.someNumber 
    }, 

    events: { 
    'click': 'someFunction' 
    }, 

    initialize: function(options){ 
    this.someNumber = options.someNumber 
    }, 

    someFunction: function(){ 
    //Do something here 
    } 
}); 

ただし、のxインスタンス化がある場合は、これによってsomeFunction回がトリガーされます。

次は私がinitializeにelとevents属性の両方を設定してみました：

someView = Backbone.View.extend({ 

    initialize: function(options){ 
    this.el = options.el 
    this.events = { 
     'click': 'someFunction' 
    } 
    }, 

    someFunction: function(){ 
    //Do something here 
    } 
}); 

をが、これはイベントをトリガしません。この時点で、私はかなり釣りをしています。

誰でも、そのインスタンスに対してのみトリガーするイベントを持つインスタンスに固有のelでbackbone.jsビューをインスタンス化し、Viewのインスタンスをインスタンス化していないことを知っていますか？

Answer 1

「this.element」のすべてのものを実際に通過する必要はありません。

バックボーンは自動的にオプションとしてコンストラクタに渡すビューの "el"を "el"に設定します。

ビュー全体を通して「this.el」として利用可能です。

これは、あなたがする必要があるすべてである：

x = Backbone.View.extend({ 
    events: { 
     'click': 'say_hi' 
    }, 

    initialize: function(options){ 
     // Not actually needed unless you're doing something else in here 
    }, 

    say_hi: function(){ 
     alert(this.el.id); 
    } 

    }); 

y = new x({el: '#div-1'}); 
z = new x({el: '#div-2'}); 

z.say_hi(); 
y.say_hi(); 
​ 

はこのライブjsFiddleを参照してください：あなたの第二の例は動作しませんでしたhttp://jsfiddle.net/edwardmsmith/QDFwf/15/

理由は、バックボーンの最新バージョンで、あなただけの設定ができないということです「エル」は直接それ以上のものです。気づいたように、イベントを適切に設定/更新することはありません。あなたが動的にそのようにエルを設定したい場合

が

initialize: function(options){ 
    this.el = options.el; 
} 

動作しない、あなたは適切に委譲するイベントとしてView.setElementを使用する必要があり、キャッシュされたthis.$elを設定します。

作品

initialize: function(options){ 
    this.setElement(options.el) 
} 

あなたの第二の例のライブjsFiddle：http://jsfiddle.net/edwardmsmith/5Ss5G/21/

しかし、これはちょうど、すでにバックボーンにボンネットの下に行われているものを再やっています。