backbone ajax 模板,BackboneJS with XML ajax

问题

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?

回答1:

You can override the default parse function to provide XML support. It should return the data transformed into JSON http://backbonejs.org/#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 $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();

And a demo http://jsfiddle.net/ULK7q/73/

来源：https://stackoverflow.com/questions/8419061/backbonejs-with-xml-ajax