lalha/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ##Backbone.js

Angular.js、Knockout.jsと比べて
バインディングの概念がない
モデルとビューのインタラクションは手動で記述
モデルやコレクションはレイヤスーパータイプから継承して定義
ビューのイベントハンドリング

events:{
	"click #add-button": "onAdd",
}


モデルのイベントハンドリング

this.listenTo(foods, "add", this.addOne);

ビューのイベントが発生した場合にも必ずモデルに更新をかけ、モデルの更新をビューが監視し、モデル経由でビューを更新する。つまりビューを正としたOne-Way Binding的な考え方。

モデル、コレクションの定義

var Food = Backbone.Model.extend({
	defaults: {
		name: "",
		price: 0,
		date: ""
	}
});
var FoodList = Backbone.Collection.extend({
	model: Food,
	localStorage: new Backbone.LocalStorage("foods-backbone")
});

var foods = new FoodList;


触ってみた所感(Angular.js、Knockout.jsと比べて)
ソース記述量が多い
「自動で何かやってくれる」部分は少ないので制御はしやすい
静的言語に近いコードになるのでJava、C#などから入る人には入りやすい
魔術的要素が少ないため、大規模プロジェクトには向いている


## foodapp.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Backbone Food Log Application</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Backbone Food Log Application">

  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div id="main" class="container">

  <h1>食べたもの</h1>

  <form id="add-form" class="form">
    <input type="text" name="name" class="input-block-level" placeholder="名前"/>
    <input type="text" name="price" class="input-block-level" placeholder="価格"/>
    <input type="date" name="date" class="input-block-level" placeholder="日付"/>
    <a href="#" id="add-button" class="btn btn-primary">追加</a>
  </form>

  <div id="food-list" class="row-fluid">
  </div>

</div>

<script type="text/template" id="tmpl-foodview">
  <input class="name-edit" type="text" value="<%- name %>" />
  <input class="price-edit" type="text" value="<%- price %>" />
  <input class="date-edit" type="date" value="<%- date %>" />
  <a href="#" class="delete-button">☓</a>
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/json2/0.1/json2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.0/backbone.localStorage-min.js"></script>
<script src="foodapp.js"></script>
</body>
</html>


## foodapp.js
(function(){
	var Food = Backbone.Model.extend({
		defaults: {
			name: "",
			price: 0,
			date: ""
		}
	});
	var FoodList = Backbone.Collection.extend({
		model: Food,
		localStorage: new Backbone.LocalStorage("foods-backbone")
	});
	var foods = new FoodList;

	var AppView = Backbone.View.extend({
		events:{
			"click #add-button": "onAdd",
		},
		initialize:function() {
			this.listenTo(foods, "add", this.addOne);
			this.name = $("#add-form [name='name']");
			this.price = $("#add-form [name='price']");
			this.date = $("#add-form [name='date']");

			foods.fetch();
		},
		onAdd:function() {
			foods.create({name:this.name.val(), price:this.price.val(), date:this.date.val()});
			this.name.val("");
			this.price.val("");
			this.date.val("");
		},
		addOne:function(food) {
			var view = new FoodView({model:food});
			this.$("#food-list").append(view.render().el);
		}
	});

	var FoodView = Backbone.View.extend({
		template: _.template($("#tmpl-foodview").html()),
		events:{
			"click .delete-button":"onDelete",
			"keypress .name-edit":  "onEdit",
			"keypress .price-edit":  "onEdit",
			"keypress .date-edit":  "onEdit",
		},
		initialize:function() {
			this.listenTo(this.model, "destroy", this.onDestroy);
		},
		render:function(){
			this.$el.html(this.template(this.model.toJSON()));
			return this;
		},
		onDelete:function() {
			this.model.destroy();
		},
		onDestroy:function() {
			this.remove();
		},
		onEdit:function() {
			this.model.set({name:this.$(".name-edit").val()});
			this.model.set({price:this.$(".price-edit").val()});
			this.model.set({date:this.$(".date-edit").val()});
		}
	});

	var appView = new AppView({el:$("#main")});
}());
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Backbone Food Log Application</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Backbone Food Log Application">

	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	</head>

	<body>

	<div id="main" class="container">

	<h1>食べたもの</h1>

	<form id="add-form" class="form">
	<input type="text" name="name" class="input-block-level" placeholder="名前"/>
	<input type="text" name="price" class="input-block-level" placeholder="価格"/>
	<input type="date" name="date" class="input-block-level" placeholder="日付"/>
	<a href="#" id="add-button" class="btn btn-primary">追加</a>
	</form>

	<div id="food-list" class="row-fluid">
	</div>

	</div>

	<script type="text/template" id="tmpl-foodview">
	<input class="name-edit" type="text" value="<%- name %>" />
	<input class="price-edit" type="text" value="<%- price %>" />
	<input class="date-edit" type="date" value="<%- date %>" />
	<a href="#" class="delete-button">☓</a>
	</script>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://cdn.jsdelivr.net/json2/0.1/json2.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.0/backbone.localStorage-min.js"></script>
	<script src="foodapp.js"></script>
	</body>
	</html>
	(function(){
	var Food = Backbone.Model.extend({
	defaults: {
	name: "",
	price: 0,
	date: ""
	}
	});
	var FoodList = Backbone.Collection.extend({
	model: Food,
	localStorage: new Backbone.LocalStorage("foods-backbone")
	});
	var foods = new FoodList;

	var AppView = Backbone.View.extend({
	events:{
	"click #add-button": "onAdd",
	},
	initialize:function() {
	this.listenTo(foods, "add", this.addOne);
	this.name = $("#add-form [name='name']");
	this.price = $("#add-form [name='price']");
	this.date = $("#add-form [name='date']");

	foods.fetch();
	},
	onAdd:function() {
	foods.create({name:this.name.val(), price:this.price.val(), date:this.date.val()});
	this.name.val("");
	this.price.val("");
	this.date.val("");
	},
	addOne:function(food) {
	var view = new FoodView({model:food});
	this.$("#food-list").append(view.render().el);
	}
	});

	var FoodView = Backbone.View.extend({
	template: _.template($("#tmpl-foodview").html()),
	events:{
	"click .delete-button":"onDelete",
	"keypress .name-edit": "onEdit",
	"keypress .price-edit": "onEdit",
	"keypress .date-edit": "onEdit",
	},
	initialize:function() {
	this.listenTo(this.model, "destroy", this.onDestroy);
	},
	render:function(){
	this.$el.html(this.template(this.model.toJSON()));
	return this;
	},
	onDelete:function() {
	this.model.destroy();
	},
	onDestroy:function() {
	this.remove();
	},
	onEdit:function() {
	this.model.set({name:this.$(".name-edit").val()});
	this.model.set({price:this.$(".price-edit").val()});
	this.model.set({date:this.$(".date-edit").val()});
	}
	});

	var appView = new AppView({el:$("#main")});
	}());