Backbone.js basics


/* Create Model */
var MessageModel = Backbone.Model.extend();

/* Create Collection with URL */
var MessageCollection = Backbone.Collection.extend({
model: MessageModel,
url: “../api/example_2.php”
});

/* Sent value within URL using collection */
var MessageCollectionNew = Backbone.Collection.extend({
model: MessageModel,
initialize: function(models, options) {
this.url = ‘../api/example_3.php?id=’ + options.id;
},
});

/* Display Message using View */

<!– Templates –>

var MessageView = Backbone.View.extend({
template:_.template($(‘#tpl-hello-backbone’).html()),
render:function (eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});

/* Router in Backbone.js */
var MessageRouter = Backbone.Router.extend({
/* Display message */
displayMessages: function() {
var messageCollection = new MessageCollection();
var messageListView = new MessageListView({model:messageCollection});
messageCollection.fetch({
success: function () {
$(‘#msg’).html(messageListView.render().el);
}
});
}

/* Send id to collection */
getMsgData: function(id){
var messageCollectionNew = new MessageCollectionNew([], { id: id });
var messageListViewNew = new MessageListViewNew({model:messageCollectionNew});
messageCollectionNew.fetch({
success: function () {
$(‘#data_show’).html(messageListViewNew.render().el);
}
});
},
});

Advertisements

One thought on “Backbone.js basics

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s