<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script type="text/x-tmpl" id="tplList">
<% if(mode=="edit"){ %>
<p data-id="<%= id %>"><input type="text" value="<%= title %>"><button>edit</button></p>
<% }else{ %>
<p data-id="<%= id %>"><%= title %></p>
<% } %>
</script>
<script>
var Todo = Backbone.Model.extend({
defaults: {
mode : 'view'
},
initialize : function(){
this.set("id",this.cid);
}
});
var todo1 = new Todo({title:"title1"});
var todo2 = new Todo({title:"title2"});
var TodoList = Backbone.Collection.extend();
var todoList = new TodoList([todo1,todo2]);
var TodoView = Backbone.View.extend({
initialize : function(){
_.bindAll(this, "render");
this.collection.on("change:mode", this.render);
this.render();
},
tmpl : _.template($("#tplList").html()) ,
events: {
"click p": "edit",
"click button" :"editDo"
},
render: function(){
var self = this;
self.$el.empty()
this.collection.each(function(model){
self.$el.append(self.tmpl(model.attributes));
});
},
edit: function(el){
this.collection.get($(el.currentTarget).data("id")).set("mode","edit");
},
editDo: function(el){
this.collection.get($(el.currentTarget).parent().data("id")).set({
"mode":"view",
"title":$(el.currentTarget).prev().val()
});
el.stopPropagation()
}
});
$(function(){
var todoView = new TodoView({el:"#foo",collection: todoList});
});
</script>
</head>
<body>
<div id="foo"></div>
</body>
</html>
【Backbron.jsの最新記事】
