0

私は Backbone を初めて使用し、Todos の例から作業を開始しました。その後、Ruby on Rails Web アプリを使用し、永続性のために localstorage ではなく REST API を関連付ける、Todos ではなく Contacts 用の新しいバージョンの例を作成しました。変更を行った後、Backbone アプリで Rails アプリを正常に更新できますが、Backbone ビューを取得して、Backbone アプリが Rails REST API から受け取るデータをレンダリングすることはできません。デバッガーでコードをステップ実行したところ、次のことがわかります。

  1. 関数を呼び出してビューを設定するイベントは、モデルのコレクションにバインドされています
  2. モデルデータを取得すると、サーバーからのデータでコレクションが更新されます
  3. ただし、コレクションにバインドされたリセット イベントは発生しません。

リセットイベントが発生しない原因を誰か教えてもらえますか? 私のコードは以下の通りです：

コレクション:

var ContactsList = Backbone.Collection.extend({
  model: Contact,
  url: 'http://localhost:3000/contacts.json',
});

var Contacts = new ContactsList;

AppView:

var AppView = Backbone.View.extend({

  el: $("#contactapp"),
  events: {
    "keypress #new-contact":  "createOnEnter"
  },

  initialize: function() {

    this.input = this.$("#new-contact");

    Contacts.bind('add', this.addOne, this);
    Contacts.bind('reset', this.addAll, this);
    Contacts.bind('all', this.render, this);

    Contacts.fetch();
  },

  addOne: function(contact) {
    var view = new ContactView({model: contact});
    this.$("#contact-list").append(view.render().el);
  },

  addAll: function() {
    Contacts.each(this.addOne);
  },

  createOnEnter: function(e) {
    if (e.keyCode != 13) return;
    if (!this.input.val()) return;

    Contacts.create({first_name: this.input.val()});
    this.input.val('');
  },

});

var App = new AppView;
4

2 に答える 2

0

多くのデバッグを行った後reset、古いバージョンの backbone.js を使用していたため、バインドされたイベントが発生していないことがわかりました。私が使用していたバージョンでは、refreshイベントではなくイベントが発生していましたreset。backbone.js の新しいバージョンにアップグレードすると、resetイベントが発生しました

于 2012-06-19T17:39:21.780 に答える
0

el: $("#contactsapp")ビューの構成によって返された空の jQuery セレクターを取得している可能性があります。

http://lostechies.com/derickbailey/2011/11/09/backbone-js-object-literals-views-events-jquery-and-el/

jQuery セレクターをオブジェクト リテラル値として使用しないでください。Backbone のビューでは、セレクター文字列を指定するだけです。

el: "#contactsapp"

しかし、これはとにかく悪い考えです。ビューに独自の el をレンダリングさせ、他のコードを使用して「#contactsapp」要素にビューを設定する必要があります。

$(function(){
  view = new AppView();
  view.render();
  $("#contacts").html(view.el);
});

詳細については、上記のリンクを参照してください。

于 2012-06-13T18:08:38.737 に答える