Come si applica jquery-ui a una vista Backbone.js?

Question

Sono nuovo su Backbone.js. Ho creato una vista per un pulsante già esistente sulla pagina. Applico jquery-ui al pulsante quando la vista viene inizializzato:

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

Questo metodo funziona, ma mi chiedo se c'è un selettore più semplice che potevo usare piuttosto che $(this.el.selector)? All'inizio pensavo che sarei stato in grado di fare solo el.button(); ma questo non funziona.

Oppure c'è un modo migliore/più semplice per affrontare l'intero processo?

Answer 1

vi posso assicurare el.button(); funziona ma ...

è necessario tenere a mente quando si esegue il vostro selettore di vista jQuery.

quando lo digiti come hai fatto, il tuo selettore jQuery viene eseguito quando viene analizzato il codice della vista, , ciò si verifica principalmente quando il tuo dom non è pronto per il caricamento.

si può meglio passare il el in seguito come questo:

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

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

ora, la vista è istanziato sul documento pronto, l'elemento pulsante è passata perché il dom era pronto e il vostro selettore risolve all'elemento tasto . e puoi usare felicemente el.button(); per applicare qualcosa su di esso.

esempio: http://jsfiddle.net/saelfaer/KEQQB/

modificare

un altro modo per farlo è quello di definire l'elementselector come argomento el, e solo eseguirlo come hai fatto.

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

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

questo funziona altrettanto bene, ma si sarebbe solo in grado di utilizzare questa vista sul pulsante dato a meno di ignorare che, il primo esempio è più pulito per il riutilizzo di codice, è possibile creare un'istanza 3 volte e ciascuno di li si potrebbe passare un altro pulsante per ...

esempio: http://jsfiddle.net/saelfaer/KEQQB/6/

sidenote su un sidenote Io suggerirei utilizzando il metodo di rendering, si è liberi di fare questo nel init, ma credo il metodo di rendering è quello che dovrebbe essere handli questo.

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(); 
});