1

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 ビュー、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 が一致しないのはなぜですか?

4

1 に答える 1

0

ビューのエルの仕組みを誤解していると思います。

バックボーン.jsビューでは、常にそのDOM要素を参照しますel。このDOM要素は、ページのDOM内の既存の要素であるか、DOMに存在しない新しい要素である可能性があります。

backback.jsのビューがイベントをリッスンする方法は、イベントをそのelに委任（バインド）することです。ビューのelが変更された場合、またはビューがリッスンするイベントを変更したい場合は、delegateEventsメソッドを呼び出してイベントを手動で（再）委任することもできます。

ビューには2つの一般的なパターンがあります。1つはビューがDOM上の既存の要素を参照する場合（これは、elプロパティを指定するか、インスタンス化時にelを渡すことによって行われます）、もう1つはビューのelが参照しない場合です。 DOM上の既存の要素を参照し、代わりにそのelにHTMLをレンダリングして、それをDOMに挿入します。

多くの場合、DOM上の既存の要素を参照する1つの親ビュー（多くの場合、コレクションビュー）と、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 に答える