Question

我有一个骨干视图，为每个传递给它的模型创建一个新的div。但是，我无法在视图上触发任何类型的事件（单击a.change-status），我认为这是因为它内部的元素也是从模板生成的。如果有一些解决方法，请告诉我。

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

示例模板如下所示：

<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

渲染新内容后尝试this.delegateEvents()。

Answer 2

有些事情可能是导致问题的原因。

首先，您的el声明似乎是可疑的。如果您想要该类的div，则只需定义className属性，因为骨干视图的默认值为div。

而不是：el: '<div class="vendor-video" />'

只需使用：className: 'vendor-video'

我没有看到有关视图初始化方法的任何详细信息，但最佳做法是初始化视图，然后将其呈现给容器：

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

还要在渲染方法上获得最后一行return this;。

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

关于使用this.delegateEvents()，您应该在视图已经在DOM之后调用此函数，否则无效。即：

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

delegateEvents()会让你的观看事件再次活跃起来。

Answer 3

我有类似的问题。您可以通过两个步骤解决此问题。
- 在视图中创建tagName
- 将模板附加到this.$el中就这样。它没有this.delegateEvents()

Answer 4

我用tagName观察到的问题并使用它来附加。$ el是，事件监听器无法附加使用所选tagName创建的最后一个元素的事件。但是，在将元素附加到DOM之后使用this.delegateEvents（）时，问题就解决了。

Backbone点击事件未在动态视图上触发

4 个答案: