JavaScriptもBACKBONE.JSならスッキリ
∼MVCぽいのを初体験!∼
ぱくたそ無料写真素材を使用しております。ありがとうございます!  http://www.pakutaso.com/about.html
13年7月28日日曜日
13年7月28日日曜日
13年7月28日日曜日
13年7月28日日曜日
ぱくたそ無料写真素材を使用しております。ありがとうございます!  http://www.pakutaso.com/about.html
13年7月28日日曜日
13年7月28日日曜日
13年7月28日日曜日
$(function(){
// menu表のデータを取得
$.ajax({
url:'/assets/g/q/B/s/gqBsC',
dataType: 'json',
}).done(function( menuList ) {
// メニ...
13年7月28日日曜日
ぱくたそ無料写真素材を使用しております。ありがとうございます!  http://www.pakutaso.com/about.html
13年7月28日日曜日
13年7月28日日曜日
13年7月28日日曜日
MVCの構造[編集]
MVCでは、プログラムを3つの要素、Model(モデル)、View(ビュー)、Controller(コントローラ)に分割する。
Model
そのアプリケーションが扱う領域のデータと手続き(ビジネスロジック - ショッピング...
13年7月28日日曜日
APIサーバ
GET
13年7月28日日曜日
click!
APIサーバ
GET
13年7月28日日曜日
ApplicationView
アプリケーション全体表示を管理
MenuItemView
メニュー表の1行表示を管理
MenuListView
メニュー表全体表示を管理
SumPriceView
合計金額表示を管理
13年7月28日日曜日
<div id="application" >
<h1 class="menu-title" >
メニュー表
</h1>
<table id="menu-table" >
</table>
<div id="sum-price-pane" >
...
13年7月28日日曜日
13年7月28日日曜日
var object = {};
_.extend(object, Backbone.Events);
object.on("alert", function(msg) {
alert("Triggered " + msg);
});
obje...
13年7月28日日曜日
13年7月28日日曜日
13年7月28日日曜日
var MenuItem = Backbone.Model.extend({
defaults:{
checked: false, //:boolean 選択フラグ
name: "", //:string ハンバーガー名
price: 0 //...
[
{ "name": "ハンバーガ", "price": 300 },
{ "name": "チーズバーガ", "price": 400 },
{ "name": "照り焼きバーガ", "price": 500 },
{ "name": "ス...
var!MenuList!=!Backbone.Collection.extend({
!!!!model:!MenuItem,
!!!!url:!'/assets/a/6/2/V/a62Vk',
!!!!sumPrice:!function(...
13年7月28日日曜日
Backbone.jsのViewは
Controllerの機能も持ちます!
ご注意!
13年7月28日日曜日
13年7月28日日曜日
13年7月28日日曜日
var!MenuItemView!=!Backbone.View.extend({
!!!!tagName:!'tr',!//:<tr></tr>
!!!
!!!!initialize:!function(!options){
!!!!!!!!...
!!!!!!!!this.listenTo(!menuItem,!'change',!this.updateRender);
!!!!},
!!!!createRender:!function(){
!!!!!!!!var!menuItem!=...
!!!!},
!!!!events:!{
!!!!!!!!"click":"onClick_menuItem"
!!!!},
!!!!onClick_menuItem:!function(event){
!!!!!!!!var!menuItem...
var MenuListView = Backbone.View.extend({
el:'#menu-table',
initialize: function(options){
this.listenTo(this.collection, ...
var SumPriceView = Backbone.View.extend({
el: '#sum-price-pane',
initialize: function(options){
this.template = _.template...
<div id="application" >
<table id="menu" ></table>
<table id="selected-menu"></table>
<div id="sum-price-pane" >
<script i...
_.templateSettings = {
evaluate: /{%(.+?)%}/g,
interpolate: /{{(.+?)}}/g,
escape: /{%-(.+?)%}/g
};
ちなみに<%= value %>が使えない環境...
var ApplicationView = Backbone.View.extend({
el: '#application',
initialize: function(options){
this.collection = new Menu...
13年7月28日日曜日
13年7月28日日曜日
13年7月28日日曜日
http://jsdo.it/itoKami1123/aPmk/
13年7月28日日曜日
Upcoming SlideShare
Loading in...5
×

JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~

1,976

Published on

第4回福岡市西区プログラム勉強会で発表させて頂いた資料です。

HTML5+α @福岡 - 第20回 2013/7/25(木) で発表した「BACKBONE.JSでMVC始めませんか?」を元に作成しています。

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,976
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~

  1. 1. JavaScriptもBACKBONE.JSならスッキリ ∼MVCぽいのを初体験!∼ ぱくたそ無料写真素材を使用しております。ありがとうございます!  http://www.pakutaso.com/about.html 13年7月28日日曜日
  2. 2. 13年7月28日日曜日
  3. 3. 13年7月28日日曜日
  4. 4. 13年7月28日日曜日
  5. 5. ぱくたそ無料写真素材を使用しております。ありがとうございます!  http://www.pakutaso.com/about.html 13年7月28日日曜日
  6. 6. 13年7月28日日曜日
  7. 7. 13年7月28日日曜日
  8. 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. 9. 13年7月28日日曜日
  10. 10. ぱくたそ無料写真素材を使用しております。ありがとうございます!  http://www.pakutaso.com/about.html 13年7月28日日曜日
  11. 11. 13年7月28日日曜日
  12. 12. 13年7月28日日曜日
  13. 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. 14. 13年7月28日日曜日
  15. 15. APIサーバ GET 13年7月28日日曜日
  16. 16. click! APIサーバ GET 13年7月28日日曜日
  17. 17. ApplicationView アプリケーション全体表示を管理 MenuItemView メニュー表の1行表示を管理 MenuListView メニュー表全体表示を管理 SumPriceView 合計金額表示を管理 13年7月28日日曜日
  18. 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. 19. 13年7月28日日曜日
  20. 20. 13年7月28日日曜日
  21. 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. 22. 13年7月28日日曜日
  23. 23. 13年7月28日日曜日
  24. 24. 13年7月28日日曜日
  25. 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. 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. 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. 28. 13年7月28日日曜日
  29. 29. Backbone.jsのViewは Controllerの機能も持ちます! ご注意! 13年7月28日日曜日
  30. 30. 13年7月28日日曜日
  31. 31. 13年7月28日日曜日
  32. 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. 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. 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. 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. 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. 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’)でテンプレート書式を取得してま す。以下3種類があります。 <%= そのまま %> <%- エスケープ %> <% JavaScript実行 %> 同名プロパティの設定値が テンプレートの中で使用されます。 13年7月28日日曜日
  38. 38. _.templateSettings = { evaluate: /{%(.+?)%}/g, interpolate: /{{(.+?)}}/g, escape: /{%-(.+?)%}/g }; ちなみに<%= value %>が使えない環境の場合は。。 13年7月28日日曜日
  39. 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. 40. 13年7月28日日曜日
  41. 41. 13年7月28日日曜日
  42. 42. 13年7月28日日曜日
  43. 43. http://jsdo.it/itoKami1123/aPmk/ 13年7月28日日曜日
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×