web-dev-qa-db-ja.com

バックボーンビューイベントが発生しない

Rails3をバックエンドとして使用し、Jammitをアセットに使用しています...現在、アセットを圧縮したり、パッケージ化したりしないようにしています。

単純なイベントは実行されませんが、alert（ 'asd'）intinializeは期待どおりに機能しています。

私はすでに他のオブジェクトで他の種類のイベントを試しましたが、うまくいきませんでした。

私のコードは次のとおりです。

var InvoiceStock = Backbone.View.extend({
  initialize: function(args) {
    _.bindAll(this, 'find_product', 'product_added');

    this.products = new ProductCollection();

    this.products.bind('add', this.product_added);

    alert('asd');
  },

  events: {
    "keypress #product_Finder": "find_product"
  },

  find_product: function(e) {
    alert('teste');
  },

  product_added: function(product) {
    alert('pqp4');
  }
});

そして私のRuby HTML：

 <%= text_field 'search', :isbn_or_isbn10_or_publisher_or_authors_or_name_like, :id => 'product_Finder' %> ou
 <%= link_to 'criar um produto', '', :id => 'new_product_link' %>.

これを生成します：

<label>Adicionar</label>
<input id="product_Finder" class="ui-autocomplete-input" type="text" size="30" name="search[isbn_or_isbn10_or_publisher_or_authors_or_name_like]" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
ou
<a id="new_product_link" href="">criar um produto</a>
javascriptjavascript-eventsbackbone.js
19
pedrofs

バックボーンビューは、要素のコンテキスト内で発生します。このコードが機能するためには、次のように構築時にその要素をビューに割り当てる必要があります。

var InvoiceStock = Backbone.View.extend({
    el: $('#product_Finder').parent()

...

または、製品Finderを含む特定のDOMオブジェクトをelに割り当てます。別の方法として、要素を動的に生成し、jQueryを使用してそれをDOMにアタッチすることができます。私は両方を使用しました。

Backboneは、jQueryデリゲートを使用して、イベントを指定およびコンテキスト化します。ビュー全体の親要素を指定しない場合、Backboneはイベントマネージャーを正しく割り当てません。

57
Elf Sternberg