这是来自JS新手的两部分问题。
因此,我正在尝试遵循Thomas Davis的教程,使用requireJS创建一个主干应用程序。
如何通过对以XML提供数据的服务器的ajax调用来创建Backbone集合?collections.fetch()似乎期望使用JSON后端。
在尝试某些事情时,我得到了以下代码,其中在Ajax成功回调中填充集合“ bookStore”时页面没有刷新。
这是我到目前为止所走的路。
var bookListView = Backbone.View.extend({ el: $("#books"), initialize: function () { thisView = this; $.ajax({ type: "GET", url: "books.xml", dataType: "xml", success: function (data) { console.log(data); $(data).find('book').each(function (index) { var bookTitle = $(this).find('name').text(); bookStore.add({ title: bookTitle }); console.log(seid); }); thisView.collection = bookStore; thisView.collection.bind('add', thisView.tryBind); } }).done(function (msg) { alert("Data retrieved: " + msg); }); this.collection = bookStore; this.collection.bind("add", this.exampleBind); this.collection.bind("refresh", function () { thisView.render(); }); /* // This one works! bookStore.add({ name: "book1" }); bookStore.add({ name: "book2" }); bookStore.add({ name: "book3" }); */ }, tryBind: function (model) { console.log(model); }, render: function () { var data = { books: this.collection.models, }; var compiledTemplate = _.template(bookListTemplate, data); $("#books").html(compiledTemplate); } });
在这里,“初始化”函数中的成功回调似乎是在正确处理数据并将其添加到集合中。但是,页面没有刷新。
当我逐步浏览Firebug控制台时,页面会刷新。我该如何解决这个问题?
您可以覆盖默认parse功能以提供XML支持。它应该返回转换为JSON的数据http://backbonejs.org/#Collection-parse
parse
将渲染绑定到reset事件,而不是refreshBackbone <1.0或syncBackbone> = 1.0 的事件
reset
refresh
sync
它可能看起来像这样
var Book = Backbone.Model.extend(); var Books = Backbone.Collection.extend({ model: Book, url: "books.xml", parse: function (data) { var $xml = $(data); return $xml.find('book').map(function () { var bookTitle = $(this).find('name').text(); return {title: bookTitle}; }).get(); }, fetch: function (options) { options = options || {}; options.dataType = "xml"; return Backbone.Collection.prototype.fetch.call(this, options); } }); var bookListView = Backbone.View.extend({ initialize: function () { this.listenTo(this.collection, "sync", this.render); }, render: function () { console.log(this.collection.toJSON()); } }); var bks = new Books(); new bookListView({collection: bks}); bks.fetch();
还有一个演示http://jsfiddle.net/ULK7q/73/