BackboneJS使用XML AJAX [英] BackboneJS with XML ajax
问题描述
这是从JS新手一个问题的两个部分。
于是，我试着按照托马斯·戴维斯的教程创建使用requireJS主干应用程序。
-
我该如何去建立骨干集合了到提供数据的XML服务器的Ajax调用？ collections.fetch（）似乎是期待一个JSON后端。
-
在尝试一些事情，我结束了以下code，其中的页面不会在从内阿贾克斯成功回调填充集书城刷新。
下面是多远，我已经得到了这么远。</ P>
VAR bookListView = Backbone.View.extend（{ EL：$（＃书）， 初始化：函数（）{ thisView =这一点; $阿贾克斯（{ 键入：GET， 网址：把books.xml 数据类型：XML， 成功：功能（数据）{ 的console.log（数据）; $（数据）.find（书）。每个（函数（指数）{ 。VAR bookTitle = $（本）.find（名称）文本（）; bookStore.add（{标题：bookTitle}）; 执行console.log（SEID）; }）; thisView.collection =书店; thisView.collection.bind（添加，thisView.tryBind）; } }）。完成（功能（MSG）{ 警报（获得的数据：+味精）; }）; this.collection =书店; this.collection.bind（添加，this.exampleBind）; this.collection.bind（刷新，函数（）{thisView.render（）;}）; / * //这一次的作品！ bookStore.add（{名：第一册}）; bookStore.add（{名字：BOOK2}）; bookStore.add（{名字：book3}）; * / }， tryBind：函数（模型）{ 执行console.log（模型）; }， 渲染：函数（）{ VAR数据= { 书籍：this.collection.models， }; 变种compiledTemplate = _.template（bookListTemplate，数据）; $（＃书）HTML（compiledTemplate）; } }）;
下面，回拨中的初始化函数成功似乎正确处理数据和添加到集合。但是，页面不刷新。
当我通过Firebug控制台步进，页面被刷新，但是。我该如何解决这个问题？
-
您可以覆盖默认解析功能，提供对XML的支持。它应该返回转化成JSON <一个数据href="http://documentcloud.github.com/backbone/#Collection-parse">http://documentcloud.github.com/backbone/#Collection-parse
-
绑定渲染到的重置的事件，而不是的刷新的骨干＆LT; 1.0或到的同步的事件骨干> = 1.0
这可能看起来像这样
VAR书= Backbone.Model.extend（）;
VAR图书= Backbone.Collection.extend（{
型号：书，
网址：把books.xml
解析：功能（数据）{
变种解析= [];
$（数据）.find（书）。每个（函数（指数）{
。VAR bookTitle = $（本）.find（名称）文本（）;
parsed.push（{标题：bookTitle}）;
}）;
回归分析;
}，
获取：功能（选件）{
选项=选项|| {};
options.dataType =XML;
返回Backbone.Collection.prototype.fetch.call（这一点，选项）;
}
}）;
VAR bookListView = Backbone.View.extend（{
初始化：函数（）{
_.bindAll（这一点，'渲染'）;
//this.collection.on("reset同步添加删除，this.render）;
this.listenTo（this.collection，复位同步添加删除，this.render）;
}，
渲染：函数（）{
的console.log（this.collection.toJSON（））;
}
}）;
VAR BKS =新的图书（）;
新bookListView（{集：BKS}）;
bks.fetch（）;
和演示 http://jsfiddle.net/nikoshr/ULK7q/
this is a two part question from a JS newbie.
So, I was trying to create a backbone application using requireJS by following Thomas Davis's tutorial.
How do I go create Backbone collections out of an ajax call to a server that provides data in XML? collections.fetch() seem to be expecting a JSON backend.
while trying some things, I ended up with the following code, in which the page doesn't refresh upon populating the collection "bookStore" from within Ajax success-callback.
Here is how far I have gotten so far.
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); } });
Here, the success call-back in the "initialize" function seems to be processing the data properly and adding to the collection. However, the page doesn't refreshed.
While I was stepping through the Firebug console, the page gets refreshed however. How do I solve this problem?
You can override the default parse function to provide XML support. It should return the data transformed into JSON http://documentcloud.github.com/backbone/#Collection-parse
Bind the render to a reset event instead of refresh for Backbone<1.0 or to a sync event for Backbone>=1.0
It could look like this
var Book = Backbone.Model.extend();
var Books = Backbone.Collection.extend({
model: Book,
url: "books.xml",
parse: function (data) {
var parsed = [];
$(data).find('book').each(function (index) {
var bookTitle = $(this).find('name').text();
parsed.push({title: bookTitle});
});
return parsed;
},
fetch: function (options) {
options = options || {};
options.dataType = "xml";
return Backbone.Collection.prototype.fetch.call(this, options);
}
});
var bookListView = Backbone.View.extend({
initialize: function () {
_.bindAll(this, 'render');
//this.collection.on("reset sync add remove", this.render);
this.listenTo(this.collection, "reset sync add remove", this.render);
},
render: function () {
console.log(this.collection.toJSON());
}
});
var bks = new Books();
new bookListView({collection: bks});
bks.fetch();
And a demo http://jsfiddle.net/nikoshr/ULK7q/
这篇关于BackboneJS使用XML AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
