Question

我是Backbone的新手，并开始使用Todos示例。之后，我创建了一个新版本的示例，用于Contacts而不是Todos，它使用Ruby on Rails Web应用程序，并且它与REST API相关联，而不是localstorage用于持久性。在进行修改之后，我能够成功地让Backbone应用程序更新Rails应用程序，但是我无法获得Backbone视图来呈现Backbone应用程序从Rails REST API接收的数据。我已经完成了调试器中的代码，可以看到：

调用函数来填充视图的事件被绑定到模型集合
当我获取模型数据时，集合将使用来自服务器的数据进行更新
但是，绑定到集合的重置事件不会触发

有人能指出我可能导致重置事件无法触发的原因吗？我的代码如下：

集合：

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;

Answer 1

您可能在视图中获得了由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);
});

有关详细信息，请参阅上述链接。

Answer 2

经过大量调试后，我发现绑定的reset事件没有被触发，因为我使用的是旧版本的backbone.js。在我使用的refresh事件版本中，不是reset事件被触发。一旦我升级到新版本的backbone.js，reset事件就会被解雇

当集合加载数据时，绑定到集合的骨干重置事件不会触发

2 个答案: