¿Cómo aplico jquery-ui a una vista de Backbone.js?

Question

Soy nuevo en Backbone.js. Creé una Vista para un botón que ya existe en la página. Aplico jquery-ui para el botón cuando se inicializa la vista:

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

Este método funciona, pero me pregunto si hay un selector simple que podría utilizar en lugar de $(this.el.selector)? Al principio pensé que podría simplemente hacer el.button(); pero eso no funciona.

¿O existe una manera mejor/más simple de abordar todo el proceso?

Answer 1

puedo asegurarle el.button(); funciona pero ...

que necesita para tener en cuenta cuando se ejecuta el selector de vista de jQuery.

cuando lo escribe como lo hizo, su selector jQuery se ejecuta cuando se analiza el código de vista, lo que significa que esto ocurre principalmente cuando su dom no estaba listo para cargarse.

se puede pasar mejor el el en adelante como esto:

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

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

ahora, la vista se crea una instancia de documento listo, el elemento de botón se pasa porque el Reino estaba listo y el selector resuelve al elemento de botón . y puedes usar felizmente el.button(); para aplicar algo en él.

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

edición

otra manera de hacerlo es definir su elementselector como argumento el, y sólo ejecutarlo como lo hizo.

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

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

esto funciona tan bien, pero sólo sería capaz de utilizar este punto de vista en el botón dado menos que lo sustituya, el primer ejemplo es más limpio para la reutilización de código, se puede crear una instancia de 3 veces y cada uno de ellos podrían pasar a otro botón para ...

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

sidenote en una anotación al margen te sugiero usar el método render, que son libres de hacer esto en el inicio, pero creo el método de renderizado es el que debería ser handli ng esto.

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