Backbone.js获取JSON的麻烦

我正在学习一些教程代码，并且像大多数教程代码一样，“json”对象是通过将其添加为javascript文件中的简单对象而伪造的。我试图从我在服务器上托管的文件中获取JSON。我试图让这更现实一些。尽管如此，我似乎无法让绑定工作。我的演示代码（我已经工作），但与JavaScript内的“json”对象可以在这里看到。Backbone.js获取JSON的麻烦

jsfiddle that works

我期望的工作可以在这里看到。

jsfiddle that doesn't

我的远程JSON是这里json file位于 - 如果你“叉”我的2个小提琴，测试工具是有你的测试（骨干，下划线，jQuery的所有板载）。

我相信我的问题的症结围绕使用集合的“集合”和“视图”。

var Contacts = Backbone.Collection.extend({ 
    model: Contact, 
    url: 'http://sturim.me/contacts.json', 
    parse: function(data) { 
     return data.objects; 
    }    
}); 

//define master view 
var ContactsView = Backbone.View.extend({ 
    el: $("#contacts"), 

    initialize: function() { 
     this.collection = new Contacts(); 
     this.collection.fetch(); 
     this.render(); 
    }, 

    render: function() { 
     this.$el.find("article").remove(); 
     _.each(this.collection.models, function(item) { 
      this.renderContact(item); 
     }, this); 
    }, 

    renderContact: function(item) { 
     var contactView = new ContactView({ 
      model: item 
     }); 
     this.$el.append(contactView.render().el); 
    } 

});

来源

2012-10-09 rsturim

首先，第二个jsfiddle由于浏览器安全性重构而失效。你不能从jsfiddle里面查询你的个人域名。

其次，在您的Contactsparse函数中，data是一个包含文件内容的字符串，所以由您决定将该响应转换为对象。

parse: function(data) { 
    return JSON.parse(data).objects; 
}

最后，fetch是异步请求，所以你的逻辑将试图使请求已完成之前。您应该根据视图上触发的事件进行渲染。

initialize: function() { 
    this.collection = new Contacts(); 

    // When the contents of the collection are set, render the view. 
    this.collection.on('reset', function(){ 
     this.render(); 
    }, this); 

    this.collection.fetch(); 
},

来源

2012-10-09 04:04:04 loganfsmyth

感谢@loganfsmyth - 这让我更加接近。我无法使解析函数完全按照您的方式工作。我必须这样做：“return response.contactsHolder”。哪些事情让事情变得更好。此外，“重置”是否是注册事件的适当地点？是否获取触发器'重置'？ – rsturim

@rsturim很高兴它的工作。我不知道'response.contactsHolder'可以工作，因为你发布的代码没有名为response的变量，并且你发布的JSON使用'contacts'，所以我假设你必须改变它。 'fetch'在fetch之后被触发，因为fetch会删除并重新创建集合的内容，因此它是放置该渲染的合理位置。骨干虽然非常灵活，所以它更多地取决于你在哪里放置它。 – loganfsmyth

感谢您的帮助 - 这为我澄清了很多事情。 – rsturim

Backbone.js获取JSON的麻烦

回答

相关问题