1

在 Backbone.js 模板模板/营养素/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 视图中，views/nutrients/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 不匹配？

4

1 回答 1

0

我认为您误解了视图 el 的工作方式。

在主干.js 视图中总是引用一个 DOM 元素，它是它的 DOM 元素el，这个 DOM 元素可以是页面 DOM 中的现有元素，也可以是 DOM 上不存在的新元素。

Backbone.js 中的视图监听事件的方式是将它们委托（绑定）到它的el。如果视图的 el 发生变化，或者您想更改它侦听的事件，您也可以通过调用delegateEvents方法手动（重新）委托事件

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

通常所做的是，您有一个引用 DOM 上现有元素的父视图（通常是集合视图），然后是一堆其 el 被附加的子视图。

在您的情况下，您可能希望将视图拆分为引用更高容器div 的父视图，并将子视图的 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);
   }
})
于 2012-12-14T02:40:32.713 回答