0

我是 Backbone 的新手，从 Todos 示例开始。之后，我为 Contacts 而不是 Todos 创建了该示例的新版本，它使用 Ruby on Rails Web 应用程序，并且它使用关联的 REST API 而不是 localstorage 来实现持久性。进行修改后，我能够成功地让 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;

应用视图：

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

您可能会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 回答
0

经过多次调试，我发现绑定reset事件没有被触发，因为我使用的是旧版本的主干.js。在我使用的版本中，refresh事件被触发而不是reset事件。一旦我升级到新版本的主干.js，reset事件就会触发

于 2012-06-19T17:39:21.780 回答