javascript - 连接 Backbone.js View 和对话框模板

Question

在 Backbone.js 模板 templates/nutritions/show_template.jst.ejs 中，我有以下内容:

<div id="nutrient_container">
<table class="person_nutrients">
...
<% for(var i=0; i < person[nutrientsToRender]().length; i++) { %>
  <% var nutrient = y[x[i]]; %>
  <tr class="deficent_nutrients">
    <td>
    <span class="nutrient_name"><%= I18n.t(nutrient.name) %></span>
    </td>
    <td><a id="show_synonyms" href="#"><%= I18n.t("Synonyms") %></a></td>
<% } %>
</table>
</div>

然后，在 Backbone.js View 中，views/nutritions/show_view.js，我有这个:

el: 'table.person_nutrients',
parent_el: 'div#nutrient-graphs',
template: JST["backbone/templates/nutrients/show_template"],
initialize: function(options) {
  ...
  this.render()
},
events: {
    'click a#show_synonyms':'synonyms_event'
},
render: function() {
  ...
  $(this.parent_el).append(this.template({person: this.model_object, nutrientsToRender: this.nutrientsToRender(), x: x_prep, y: y_prep}))
}, 
synonyms_event: function(event) {
  alert("I got called");
}

为什么事件(警报框)没有被触发？我单击“同义词”链接，得到的只是根 URL，后面带有 #。为什么 Javascript 不匹配？

Answer 1

我认为您误解了 View 的工作方式。

在backbone.js View 中总是引用一个DOM元素，即它的el，这个DOM元素可以是页面DOM中的现有元素，也可以是不存在的新元素DOM。

backbone.js 中的 View 监听事件的方式是委托(delegate)(绑定(bind))它们到它的 el 。如果 View 的 el 发生变化，或者您想要更改它监听的事件，您还可以通过调用 delegateEvents 手动(重新)委托(delegate)事件。方法

View 有两种常见模式，一种是 View 引用 DOM 上的现有元素(这是通过指定它的 el 属性或在实例化时传入 el 来完成的)，第二种是 View 的 el不引用 DOM 上的现有元素，而是在其 el 中呈现一些 HTML，然后将其插入到 DOM 中。

通常所做的事情是，您有一个父 View (通常是 Collection View )，它引用 DOM 上的现有元素，然后是一堆其 el 被附加的 subview 。

在您的情况下，您可能希望将 View 拆分为引用更高容器 div 的父 View ，并将 subview 的 els 附加到其中。

例如

<div id="dvContainer">

<div id="synomCont"></div>
<input type="button" id="btnAdd" value="add" />
</div>


var ParentView = Backbone.Views.extend({

   el: 'dvContainer',

   events: {
       "click #add" : "addSyn"
   },

   addSyn: function() {
      //here you can create a model with the approptate data, and pass that in to
      // the view
      var view = new SynomView();
      this.$el.find('#synomCont').append(view.render().el);
   }
})