Question

在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 / nutrient / 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");
}

为什么事件（警报框）没有被触发？我点击“同义词”的链接，我得到的只是带有＃后面的根网址。为什么Javascript不匹配？

Answer 1

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

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

backbone.js 监听事件的方式是通过委托（绑定）它们到el。如果视图的更改，或者您想要更改它侦听的事件，您还可以通过调用delegateEvents方法手动（重新）委派事件

视图有两种常见的模式，一种是视图引用DOM上的现有元素（这是通过指定它的el属性或在实例化时传入el来完成的），第二种是视图的el不会引用DOM上的现有元素，而是在其中呈现一些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);
   }
})

连接Backbone.js视图和对话框模板

1 个答案: