Làm cách nào để áp dụng jquery-ui cho chế độ xem Backbone.js?

Question

Tôi mới sử dụng Backbone.js. Tôi đã tạo Chế độ xem cho một nút đã tồn tại trên trang. Tôi áp dụng jquery-ui nút khi xem được khởi tạo:

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

Phương pháp này hoạt động, nhưng tôi tự hỏi nếu có một chọn đơn giản hơn tôi có thể sử dụng chứ không phải là $(this.el.selector)? Lúc đầu, tôi nghĩ rằng tôi sẽ có thể chỉ cần làm el.button(); nhưng điều đó không hoạt động.

Hoặc có cách nào tốt hơn/đơn giản hơn để tiếp cận toàn bộ quá trình không?

Answer 1

tôi có thể đảm bảo với bạn el.button(); làm việc nhưng ...

bạn cần phải lưu ý khi chọn xem jquery của bạn được thực thi.

khi bạn nhập nó như bạn đã làm, bộ chọn jQuery của bạn được thực thi khi mã xem được phân tích cú pháp, có nghĩa là, điều này chủ yếu xảy ra khi dom của bạn chưa sẵn sàng tải.

bạn tốt nhất có thể vượt qua el ở sau như thế này:

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

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

bây giờ, tầm nhìn của bạn được khởi tạo trên tài liệu đã sẵn sàng, các yếu tố nút được truyền vì dom đã sẵn sàng và chọn của bạn giải quyết để các yếu tố nút . và bạn có thể vui vẻ sử dụng el.button(); để áp dụng điều gì đó trên đó.

dụ: http://jsfiddle.net/saelfaer/KEQQB/

chỉnh sửa

một cách khác để làm điều đó là để xác định elementselector của bạn như là đối số el, và chỉ thực hiện nó như bạn đã làm.

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

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

này sẽ làm việc tốt, nhưng bạn sẽ chỉ có thể sử dụng quan điểm này vào nút cho bạn trừ khi bạn ghi đè lên nó, ví dụ đầu tiên là sạch để dùng lại mã, bạn có thể nhanh chóng nó 3 lần và mỗi người trong số chúng bạn có thể vượt qua một nút khác để ...

dụ: http://jsfiddle.net/saelfaer/KEQQB/6/

sidenote trên sidenote tôi muốn đề nghị sử dụng làm phương pháp, bạn được tự do để làm điều này trong init, nhưng tôi tin rằng phương thức render là phương thức cần phải là handli này.

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