2015年11月19日

Backbone.jsで永続化時のURLやらmethodを変更

通常Backbone.jsでは以下のメソッドを利用した場合に右に書いたようなAjax通信を行いサーバーとの動機を行おうとする。(Collection.urlが"/api/foo"の場合)






Model.create/api/fooPOST
Model.save/api/fooPUT
Model.destroy/api/fooDELETE
Collection.fetch/api/fooFETCH


ただ、これをAPI仕様に合わせる為に以下のように変更する。






Model.create/api/addPOST
Model.save/api/deditPOST
Model.destroy/api/deletePOST
Collection.fetch/api/readPOST


Collectionはextend時に以下のようなrequestInfoオブジェクトとsyncメソッドを指定。

app.Library = Backbone.Collection.extend({
model : app.Book,
url : "/api/books",
requestInfo : {
'read' : {type: 'POST', url: "/api/books/read"}
},
sync: function(method, model, options){
options.url = this.requestInfo[method].url;
options.type = this.requestInfo[method].type;
Backbone.sync(method, model, options);
}
});


Modelはextend時に以下のようなrequestInfoオブジェクトとsyncメソッドを指定。
(サーバーのせっていによってはemulateJSONの指定は不要)

app.Book = Backbone.Model.extend({
requestInfo : {
'create': {type: 'POST', url: "/api/books/add"},
'update': {type: 'POST', url: "/api/books/edit"},
'delete': {type: 'POST', url: "/api/books/delete"}
},
sync: function(method, model, options){
options.url = this.requestInfo[method].url;
options.type = this.requestInfo[method].type;
options.emulateJSON = true;
if(model)options.data = model.toJSON();
Backbone.sync(method, model, options);
}
});

タグ:Backbone.js
posted by ねこまんま at 02:05 | Comment(0) | TrackBack(0) | Backbron.js | 更新情報をチェックする

2015年11月10日

Backbone.jsのvalidateメソッド

Backbone.jsのvalidateメソッドについて詳しく知らんかったのでメモ。

set()やunset()時に{validate:true}というオプションを付与するとvalidateメソッドで定義したバリデーションを行う。何も返さなければそのままそのままモデルに格納されるが何か返した場合にはinvalidイベントを発火させモデルには何も格納しない。

var Bar = Backbone.Model.extend({
initialize:function(){
this.on("invalid",function(){
console.log("invalid");
});
},
defaults:{
name:"Jhon"
},
validate: function(attr){
console.log("validate");
if(!attr.name){
return false;
}
}
});

var bar = new Bar();

console.log(bar.get("name"));//Jhon

bar.set({name:""},{validate:true});//validate,invalid

console.log(bar.get("name"));//Jhon

bar.unset("name",{validate:true});//validate,invalid

console.log(bar.get("name"));//Jhon

bar.set({name:"Ben"},{validate:true});//validate

console.log(bar.get("name"));//Ben

posted by ねこまんま at 18:09 | Comment(0) | TrackBack(0) | Backbron.js | 更新情報をチェックする

2013年07月17日

Backbone.jsのCollectionを使ったサンプル

Backbone.jsのCollectionを使ったサンプル。

<!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>
posted by ねこまんま at 13:24 | Comment(0) | TrackBack(0) | Backbron.js | 更新情報をチェックする

2013年02月19日

Backborn.jsでのURLルーティング

Backbron.jsでルーティング機能を実装する方法

Backbone.Routerをextendしてroutesでハッシュタグと対応するメソッドを関連づければOK

var Router = Backbone.Router.extend({
routes : {
'index' : "index",
"about" : "about"
},
initialize : function(){
if(!location.hash){
location.hash = "index"
}
},
index : function(){
alert("index")
},
about : function(){
alert("about");
}
});
var router = new Router();
Backbone.history.start();


Backbone.history.start()を指定しないとハッシュイベントの取得ができないので注意。
posted by ねこまんま at 14:34 | Comment(0) | TrackBack(0) | Backbron.js | 更新情報をチェックする