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?
Backbone. Backbone has been around for a long time, but it's still under steady and regular development. It's a good choice if you want a flexible JavaScript framework with a simple model for representing data and getting it into views.
Backbone. js is a model view controller (MVC) Web application framework that provides structure to JavaScript-heavy applications. This is done by supplying models with custom events and key-value binding, views using declarative event handling and collections with a rich application programming interface (API).
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With