Sự kiện nhấp chuột đường trục không kích hoạt trên chế độ xem động

Question

Tôi có chế độ xem xương sống tạo ra một div mới cho mỗi mô hình được truyền vào nó. Tuy nhiên, tôi không thể nhận được bất kỳ loại sự kiện nào để kích hoạt (nhấn a.change-status) trên khung nhìn và tôi cho rằng đó là vì các phần tử bên trong của nó cũng được tạo ra từ một khuôn mẫu. Xin vui lòng cho tôi biết nếu có một số cách xung quanh này.

var videoDivView = Backbone.View.extend({ 
el: '<div class="vendor-video" />', 
initialize: function(){ 
    _.bindAll(this); 
    this.render(); 
    this.model.on('change:published', this.enableSaveButton); 
}, 
events: { 
    'click a.change-status'  : 'changeVideoStatus' 
}, 
template: video_tmpl, 
render: function(){ 
    this.$el.attr("id", 'video-'+this.model.id); 
    this.$el.html(this.template(this.model.toJSON())); 
    this.$el.data('status', video_statuses[this.model.get('published')]); 
}, 
changeVideoStatus: function(e) { 
    console.log(this.model); 
    return false; 
}, 
enableSaveButton: function() { 
    $('#save-changes').removeClass('disabled').removeAttr('disabled'); 
} 
}); 

một ví dụ mẫu sẽ trông như thế:

<script id="single-video-tmpl" type="text/x-jquery-tmpl"> 
<div> 
    <div class="video-info"> 
     <span class="video-title"><%=video_title%></span> 
     <div class="bottom-info"> 
      <a href="#<%=id%>" class="change-status"></a> 
     </div> 
    </div> 

</div> 
</script> 

Answer 1

Có một số điều có thể là nguyên nhân gây ra sự cố.

Trước hết, tuyên bố el của bạn có vẻ là nghi ngờ. Nếu bạn muốn một div với lớp đó bạn chỉ cần xác định thuộc tính className vì mặc định cho khung nhìn xương sống là div.

Thay vì: el: '<div class="vendor-video" />'

chỉ cần sử dụng: className: 'vendor-video'

Tôi không thấy bất kỳ thông tin chi tiết về quan điểm của các phương pháp khởi tạo của bạn, nhưng việc thực hành tốt nhất là để khởi tạo một cái nhìn và sau đó làm cho nó vào container:

var yourVideoDivView = new videoDivView({model: model}); 
$("#your-video-container").html(yourVideoDivView.render().el) 

cũng để có được dòng cuối cùng hoạt động, bạn phải return this; trên phương thức hiển thị của mình.

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

Về sử dụng this.delegateEvents(), bạn nên gọi chức năng này sau khi xem bạn đã có trong DOM nếu không nó làm cho không có ý nghĩa. tức là:

$("#your-video-container").html(yourVideoDivView.render().el) 
yourVideoDivView.delegateEvents(); 

delegateEvents() sẽ làm cho sự kiện xem của bạn hoạt động trở lại.

Answer 2

Thử this.delegateEvents() sau khi bạn làm cho nội dung mới.

Answer 3

Tôi gặp sự cố tương tự. Bạn có thể giải quyết vấn đề này theo hai bước.
- Tạo một tagName trong chế độ xem
- Thêm mẫu của bạn vào this.$el
Đó là tất cả. Và nó hoạt động mà không cần this.delegateEvents()

Answer 4

Vấn đề tôi quan sát được với tagName và phụ thêm bằng cách sử dụng này. $ El là, người nghe sự kiện không đính kèm sự kiện cho phần tử cuối cùng được tạo bằng thẻ đã chọn. Tuy nhiên, vấn đề đã được giải quyết khi sử dụng this.delegateEvents() sau khi thêm các phần tử vào DOM.