第4回福岡市西区プログラム勉強会で発表させて頂いた資料です。 HTML5+α @福岡 - 第20回 2013/7/25(木) で発表した「BACKBONE.JSでMVC始めませんか？」を元に作成しています。

1. JavaScriptもBACKBONE.JSならスッキリ
∼MVCぽいのを初体験！∼
ぱくたそ無料写真素材を使用しております。ありがとうございます！ http://www.pakutaso.com/about.html
13年7月28日日曜日

2. 13年7月28日日曜日

3. 13年7月28日日曜日

4. 13年7月28日日曜日

5. ぱくたそ無料写真素材を使用しております。ありがとうございます！ http://www.pakutaso.com/about.html
13年7月28日日曜日

6. 13年7月28日日曜日

7. 13年7月28日日曜日

8. $(function(){
// menu表のデータを取得
$.ajax({
url:'/assets/g/q/B/s/gqBsC',
dataType: 'json',
}).done(function( menuList ) {
// メニュー表の作成
var $menuTable = $('#menu');
_.each( menuList, function( item, idx){
var $tr = $('<tr>');
$menuTable.append( $tr);
var $chk = $('<input type="checkbox" />').data({
"idx":idx,
"name":item.name,
"price":item.price});
$tr.append( $('<td>').append( $chk))
.append( $('<td>').text( item.name))
.append( $('<td>').text( item.price));
});
// イベントの取り付け
$menuTable.on('click','input[type=checkbox]',function(event){
13年7月28日日曜日

9. 13年7月28日日曜日

10. ぱくたそ無料写真素材を使用しております。ありがとうございます！ http://www.pakutaso.com/about.html
13年7月28日日曜日

11. 13年7月28日日曜日

12. 13年7月28日日曜日

13. MVCの構造[編集]
MVCでは、プログラムを3つの要素、Model（モデル）、View（ビュー）、Controller（コントローラ）に分割する。
Model
そのアプリケーションが扱う領域のデータと手続き（ビジネスロジック - ショッピングの合計額や送料を計算するなど）を表現
する要素である。また、データの変更をviewに通知するのもmodelの責任である（modelの変更を通知するのにObserver パター
ンが用いられることもある）。
多くのアプリケーションではデータの格納に永続的な記憶の仕組み（データベースなど）が使われている。MVCの概念では、
データの（UI以外の）入出力は取り扱わないので、データアクセスも本来MVCの概念の範疇を超えるものではあるが、敢えてい
えばmodelの中に隠 されると考えられる。
View
modelのデータを取り出してユーザが見るのに適した形で表示する要素である。すなわちUIへの出力を担当する。例えば、ウェ
ブアプリケーションではHTML文書を生成して動的にデータを表示するためのコードなどにあたる。
Controller
ユーザの入力（通常イベントとして通知される）に対して応答し、それを処理する要素である。すなわちUIからの入力を担当す
る。modelとviewに変更を引き起こす場合もあるが、直接に描画を行ったり、modelの内部データを直接操作したりはしない。
http://ja.wikipedia.org/wiki/Model_View_Controller
13年7月28日日曜日

14. 13年7月28日日曜日

15. APIサーバ
GET
13年7月28日日曜日

16. click!
APIサーバ
GET
13年7月28日日曜日

17. ApplicationView
アプリケーション全体表示を管理
MenuItemView
メニュー表の１行表示を管理
MenuListView
メニュー表全体表示を管理
SumPriceView
合計金額表示を管理
13年7月28日日曜日

18. <div id="application" >
<h1 class="menu-title" >
メニュー表
</h1>
<table id="menu-table" >
</table>
<div id="sum-price-pane" >
<script id="sum-price-pane-template" type="text/template" >
合計：<span ><%= sumPrice %></span>
</script>
</div>
</div>
13年7月28日日曜日

19. 13年7月28日日曜日

20. 13年7月28日日曜日

21. var object = {};
_.extend(object, Backbone.Events);
object.on("alert", function(msg) {
alert("Triggered " + msg);
});
object.trigger("alert", "an event");
http://backbonejs.org/
Underscore.jsの機能：
オブジェクトのすべてのプロパティを
別オブジェクトにコピー
13年7月28日日曜日

22. 13年7月28日日曜日

23. 13年7月28日日曜日

24. 13年7月28日日曜日

25. var MenuItem = Backbone.Model.extend({
defaults:{
checked: false, //:boolean 選択フラグ
name: "", //:string ハンバーガー名
price: 0 //:number お値段
},
toggleChecked: function(){
this.set("checked", !this.get("checked") );
}
})
13年7月28日日曜日

26. [
{ "name": "ハンバーガ", "price": 300 },
{ "name": "チーズバーガ", "price": 400 },
{ "name": "照り焼きバーガ", "price": 500 },
{ "name": "スペシャル", "price": 600 }
]
http://jsrun.it/assets/a/6/2/V/a62Vk
13年7月28日日曜日

27. var!MenuList!=!Backbone.Collection.extend({
!!!!model:!MenuItem,
!!!!url:!'/assets/a/6/2/V/a62Vk',
!!!!sumPrice:!function(){
!!!!!!!!var!checkedMenuItems!=!this.where({!checked:true!});
!!!!!!!!var!sum!=!0;
!!!!!!!!_.each(checkedMenuItems,function(model){
!!!!!!!!!!!!sum!+=!model.get("price");
!!!!!!!!});
!!!!!!!!return!sum;
!!!!}
});
13年7月28日日曜日

28. 13年7月28日日曜日

29. Backbone.jsのViewは
Controllerの機能も持ちます！
ご注意！
13年7月28日日曜日

30. 13年7月28日日曜日

31. 13年7月28日日曜日

32. var!MenuItemView!=!Backbone.View.extend({
!!!!tagName:!'tr',!//:<tr></tr>
!!!
!!!!initialize:!function(!options){
!!!!!!!!var!menuItem!=!this.model;!//:MenuItem
!!!!!!!!this.listenTo(!menuItem,!'change',!this.updateRender);
!!!!},
!!!!createRender:!function(){
!!!!!!!!var!menuItem!=!this.model;
13年7月28日日曜日

33. !!!!!!!!this.listenTo(!menuItem,!'change',!this.updateRender);
!!!!},
!!!!createRender:!function(){
!!!!!!!!var!menuItem!=!this.model;!//:MenuItem
!!!!!!!!var!$chk!=!$('<input!type="checkbox"!/>');
!!!!!!!!var!name!=!menuItem.get("name");
!!!!!!!!var!price!=!menuItem.get("price");
!!!!!!!!this.$el
!!!!!!!!!!!.append($('<td>').append($chk))
!!!!!!!!!!!.append($('<td>').text(name))
!!!!!!!!!!!.append($('<td>').text(price));
!!!!},
!!!!events:!{
!!!!!!!!"click":"onClick_menuItem"
!!!!},
13年7月28日日曜日

34. !!!!},
!!!!events:!{
!!!!!!!!"click":"onClick_menuItem"
!!!!},
!!!!onClick_menuItem:!function(event){
!!!!!!!!var!menuItem!=!this.model;
!!!!!!!!menuItem.toggleChecked();
!!!!},
!!!!updateRender:function!(){
!!!!!!!!var!menuItem!=!this.model;
!!!!!!!!var!$chk!=!this.$('input[type="checkbox"]');
!!!!!!!!var!checked!=!menuItem.get("checked");
!!!!!!!!$chk.prop('checked',checked);
!!!!!!!!if!(!checked!){
!!!!!!!!!!!!this.$el.addClass('on');
!!!!!!!!}else{
!!!!!!!!!!!!this.$el.removeClass('on');
!!!!!!!!}
!!!!}
});
this.listenTo( menuItem, 'change', this.updateRender);
13年7月28日日曜日

35. var MenuListView = Backbone.View.extend({
el:'#menu-table',
initialize: function(options){
this.listenTo(this.collection, //:MenuList
'reset',this.listRender);
},
listRender: function(){
this.collection.each(this.createMenuItem,this);
},
createMenuItem: function(menuItem){
var opt = {model:menuItem};
var menuItemView = new MenuItemView(opt);
menuItemView.createRender();
this.$el.append( menuItemView.$el);
}
});
13年7月28日日曜日

36. var SumPriceView = Backbone.View.extend({
el: '#sum-price-pane',
initialize: function(options){
this.template = _.template( $('#' + this.el.id + '-template').html() );
this.listenTo(this.collection,'reset',this.render);
this.listenTo(this.collection,'change',this.render);
},
render: function(){
var menuList = this.collection;
var sumPrice = menuList.sumPrice();
var html = this.template( { sumPrice: sumPrice } );
this.$el.empty()
.html( html );
}
});
13年7月28日日曜日

37. <div id="application" >
<table id="menu" ></table>
<table id="selected-menu"></table>
<div id="sum-price-pane" >
<script id="sum-price-pane-template" type="text/template" >
合計：<span ><%= sumPrice %></span>
</script>
</div>
</div>
var SumPriceView = Backbone.View.extend({
el: '#sum-price-pane',
・・・省略・・・
initialize: function(options){
this.template = _.template( $('#' + this.el.id + '-template').html() );
・・・省略・・・
},
render: function(){
var menuList = this.collection;
var price = menuList.sumPrice();
var html = this.template( { sumPrice: price } );
this.$el.empty()
.html( html );
}
});
$(‘#id’)でテンプレート書式を取得してま
す。以下３種類があります。
<%= そのまま %>
<%- エスケープ %>
<% JavaScript実行 %>
同名プロパティの設定値が
テンプレートの中で使用されます。
13年7月28日日曜日

38. _.templateSettings = {
evaluate: /{%(.+?)%}/g,
interpolate: /{{(.+?)}}/g,
escape: /{%-(.+?)%}/g
};
ちなみに<%= value %>が使えない環境の場合は。。
13年7月28日日曜日

39. var ApplicationView = Backbone.View.extend({
el: '#application',
initialize: function(options){
this.collection = new MenuList();
var op = { collection:this.collection};
var menuListView = new MenuListView(op);
var selectedListView = new SelectedListView(op);
var sumPriceView = new SumPriceView(op);
},
start: function(){
this.collection.fetch({reset: true});
}
});
$(function(){
(new ApplicationView()).start();
});
一つのCollection(Model)
を複数のViewが利用する事で
複数のView間の整合性が保た
れます。
アプリケーション開始時に
APIサーバにGETしてJSON取得し
ます。
[注]{reset:true}が無いと
resetイベントが発火しません。
13年7月28日日曜日

40. 13年7月28日日曜日

41. 13年7月28日日曜日

42. 13年7月28日日曜日

43. http://jsdo.it/itoKami1123/aPmk/
13年7月28日日曜日