Question

我正在使用Backbone.js构建一个应用程序，其中显示了一个项目列表和一个占位符“new”项。容器是一个包含所有子视图并呈现它们的视图。

我已经搜索了一段时间，但无法让它发挥作用。问题是模板中的“添加”按钮不会触发事件。我想这是因为渲染发生在以后的某个时间点，所以事件没有分配。阅读其他帖子这应该由Backbone.js处理，但它似乎不是这样。在render()完成工作后添加jQuery事件处理程序，但我认为这不是解决方案。

以下是该视图的相关代码：

template: _.template($("#template-time-new").html()),
events: {
  'click #btn-new-time': 'onButtonNewClick'
},
render: function() {
  this.$el.html(this.template());

  return this;
},

onButtonNewClick: function() {
  return false; // in this case: prevent page reload
}

我的模板（玉）：

script(type="text/template", id="template-time-new").
<h3>
  <label for="new-time-name" class="muted">Name:</label>
  <input id="new-time-name" type="text">
</h3>
<div class="time-inner">
  <form class="form-horizontal">
    <label for="new-time-start" class="muted">From:</label>
    <input id="new-time-start" type="datetime-local">

    <label for="new-time-end" class="muted">to</label> 
    <input id="new-time-end" type="datetime-local">

    <button class="btn" id="btn-new-time">
      Add
    </button>
  </form>
</div>

修改

以下是父视图中的代码：

initialize: function() {
  this.newView = new TimeSpanNewView; // <---- the view that is not really working

  this.render();

  // bind event handlers
  this.collection.on('all', this.render, this);
  // fetch data
  this.collection.fetch();
},

render: function() {
  var self = this;

  self.$el.empty();

  if ( self.collection.length > 0 ) {
    self.collection.each(function(timespan) {
      var subView = new TimeSpanView({ // sub views for the items, everything fine here
        model: timespan
      });

      subView.render()
      self.$el.append(subView.el);
    });
  } else {
    self.$el.text("Nothing found.");
  }

  self.$el.append(self.newView.render().el);

  return self;
}

Answer 1

删除了之前的评论。那么，您必须在父视图的render()中每次都渲染它。但不是self.$el.html("");尝试self.$el.children().detach()。并将子视图添加为

self.$el.append(self.newView.render().el);

说明：$ el已包含您的子视图，您不想完全删除子视图。所以你需要在这上面调用detach（） - 它从页面中删除子视图的DOM对象，但不会完全删除它。

Backbone.js：将事件绑定到模板按钮

1 个答案: