jquery-uiをBackbone.jsビューに適用するにはどうすればよいですか？

Question

私はBackbone.jsを初めて使用しています。ページに既に存在するボタンのビューを作成しました。私は、ビューが初期化されているボタンにjqueryの-UI適用されます。このメソッドの動作

var ButtonView = Backbone.View.extend({ 
    el: $('#ButtonId'), 
    initialize: function() { 
     $(this.el.selector).button(); 
    } 
}); 

を、より簡単なセレクタは私が$(this.el.selector)ではなく、そこに使用することができれば、私は疑問に思って？私は最初にel.button();を行うことができると思ったが、それは動作しません。

また、プロセス全体にアプローチするためのより良い/より簡単な方法がありますか？

Answer 1

私はあなたのビューjQueryのセレクタが実行されたときに心に留めておく必要がある けど...

を作品el.button();を保証することができます。

あなたのように入力すると、ビューコードが解析されたときにjQueryセレクタが実行されます。 の意味は、domが読み込み準備ができていない場合です。

あなたが最良の後にこのようにelを渡すことができます：今、あなたのビューは、文書準備にインスタンス化され

var ButtonView = Backbone.View.extend({ 
    initialize: function() { 
     this.el.button(); 
    } 
}); 

$(function(){ 
    var myButton = new ButtonView({ el: $('#ButtonId') }); 
}); 

、ボタン要素は、DOMの準備ができていたので、合格し、あなたのセレクタは、ボタン要素に解決されます。喜んでel.button();を使って何かを適用することができます。

例：それを行うにはhttp://jsfiddle.net/saelfaer/KEQQB/

編集

別の方法は、エル引数としてごelementselectorを定義し、唯一のあなたがやったようにそれを実行することです。

var ButtonView = Backbone.View.extend({ 
    el: '#ButtonId' 
    initialize: function() { 
     $(this.el).button(); 
    } 
}); 

$(function(){ 
    var myButton = new ButtonView({ }); 
}); 

これは同様に動作しますが、あなただけがそれを上書きしない限り、最初の例は、コードを再利用するためのクリーナーです、あなたの特定のボタンでこのビューを使用することができるだろう、あなたはそれを3回インスタンス化し、それぞれの可能性それらあなたがする...

例別のボタン渡すことができます。私はrenderメソッドを使用してお勧めしたい追記上のhttp://jsfiddle.net/saelfaer/KEQQB/6/

追記 を、あなたは、initでこれを行うには無料ですが、私は信じていますレンダリングメソッドは、手作業でなければならないものですこれあなたには、いくつかのスタイリングをしたい場合は、リソースに// ajax.googleapis.com/AJAX/libsに/ jqueryui/1.8.16 /テーマ/ベース/ jqueryの-ui.css`：

var ButtonView = Backbone.View.extend({ 

    initialize: function() { 
     _.bindAll(this, "render"); 
    }, 

    render: function() { 
     this.el.button(); 
     return this; 
    } 
}); 

$(function(){ 
    var myButton = new ButtonView({ el: $('#ButtonId') }).render(); 
});