cách thích hợp để chỉ định động xem backbone.js el

Question

Tôi muốn tạo hai (hoặc nhiều) trường hợp xem, mỗi trường có các thuộc tính el khác nhau và có các sự kiện liên kết với chúng thông qua sự kiện băm của khung nhìn backbone.js (không phải thông qua jQuery) .

Bắt sự kiện để kích hoạt khi tất cả instantiations có cùng el là dễ dàng:

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

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

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

Cho đến nay, nếu tôi gán el trong initialize chức năng, và thiết lập events thường như sau, các sự kiện không kích hoạt:

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

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

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

Bản năng đầu tiên của tôi là có el là hàm trả về chuỗi đại diện của phần tử dom quan tâm:

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

Tuy nhiên, điều này kích hoạt someFunction x lần nếu tôi có x instantiations là .

Tiếp theo, tôi cố gắng thiết lập cả el và events thuộc tính trong initialize:

someView = Backbone.View.extend({ 

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

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

nhưng điều này không kích hoạt sự kiện. Tại thời điểm này tôi khá nhiều câu cá.

Có ai biết cách khởi tạo chế độ xem backbone.js với el cụ thể cho trường hợp đó có các sự kiện chỉ kích hoạt cho trường hợp đó và không phải các trường hợp khác của View không?

Answer 1

Bạn không thực sự cần phải trải qua tất cả nội dung "this.element".

Xương sống tự động đặt "el" của chế độ xem thành "el" bạn chuyển vào hàm tạo làm tùy chọn.

Sau đó, nó có sẵn dưới dạng "this.el" trong toàn bộ chế độ xem.

Đây là tất cả các bạn cần làm:

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

Xem jsFiddle sống này: http://jsfiddle.net/edwardmsmith/QDFwf/15/

Lý do ví dụ thứ hai của bạn không làm việc là với các phiên bản mới nhất của Backbone, bạn có thể không chỉ cần thiết "el" trực tiếp nữa. Điều này không, như bạn nhận thấy, thiết lập đúng/cập nhật sự kiện.

Không làm việc

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

Nếu bạn muốn thiết lập các el động theo cách đó, bạn cần phải sử dụng View.setElement như đúng đại biểu các sự kiện và thiết lập các cache this.$el.

trình

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

Sống jsFiddle ví dụ thứ hai của bạn: http://jsfiddle.net/edwardmsmith/5Ss5G/21/

Nhưng điều này chỉ là tái làm những gì đã được thực hiện dưới mui xe trong Backbone.