JavaScriptで大規模なアプリケーションを効率的に開発するためのフレームワークです。
banckbon-jsのファイルをgithubからダウンロードして展開していきます。
banckbon-js
model, view, collection
(function() {
// Model
var Task = Backbone.Model.extend({
defaults: {
title: "do something!",
completed: false
}
});
var task = new Task();
// view
var TaskView = Backbone.View.extend({
tagName: 'li',
template: _.template( $('#task-template').html() ),
render: function(){
var template = this.template( this.model.toJSON());
this.$el.html(template);
return this;
}
});
// collection
var Tasks = Backbone.Collection.extend({
model: Task
});
var TasksView = Backbone.View.extend({
tagName: 'ul',
render: function(){
this.collection.each(function(task){
var taskView = new TaskView({model: task});
this.$el.append(taskView.render().el);
}, this);
return this;
}
});
var tasks = new Tasks([
{
title: 'task1',
completed: true
},
{
title: 'task2'
},
{
title: 'task3'
}
]);
// console.log(tasks.toJSON());
var tasksView = new TasksView({collection: tasks});
$('#tasks').html(tasksView.render().el);
})();
続いて、htmlです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Backbone.js</title> </head> <body> <div id="tasks"></div> <script type="text/template" id="task-template"> <%- title %> </script> <script src="js/underscore.js"></script> <script src="js/jquery.js"></script> <script src="js/backbone.js"></script> <script src="js/app.js"></script> </body> </html>
