Backbron.js: JavaScriptメモ

TOP / Backbron.js

2015年11月19日

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

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

Model.create	/api/foo	POST
Model.save	/api/foo	PUT
Model.destroy	/api/foo	DELETE
Collection.fetch	/api/foo	FETCH

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

Model.create	/api/add	POST
Model.save	/api/dedit	POST
Model.destroy	/api/delete	POST
Collection.fetch	/api/read	POST

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

タグ：BACKBONE validate Invalid

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>

タグ：Backbone.js COLLECTION

posted by ねこまんま at 13:24 | Comment(0) | TrackBack(0) | Backbron.js |

2013年02月26日

Underscore.jsでXSS対策

Backborn.jsのテンプレートエンジン「Underscore.js」でXSS対策する方法

<%= hoge %>

だとHTMLがそのまま出力されるので

<%- hoge %>

とすると実体参照に変換される。

(実装までみていないので穴があるかもしれないので自己責任で参考までにしてください)

posted by ねこまんま at 00:21 | 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()を指定しないとハッシュイベントの取得ができないので注意。

タグ：Backborn.js ROUTER

posted by ねこまんま at 14:34 | Comment(0) | TrackBack(0) | Backbron.js |