狠狠撸

叠础颁碍叠翱狈贰.闯厂で惭痴颁始めませんか？
13年7月25日木曜日

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

$(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){

$tr.append( $('<td>').append( $chk))
.append( $('<td>').text( item.name))
.append( $('<td>').text( item.price));
});
// イベントの取り付け
$menuTable.on('click','input[type=checkbox]',function(event){
var $selectedMenuTable = $('#selected-menu');
$selectedMenuTable.empty();
var sum=0;
var $inputs = $menuTable.find('input[type=checkbox]');
$inputs.each( function( ){
var $input = $(this);
if ( $input.prop('checked') ){
var data = $input.data();
var $tr = $('<tr>');
$tr.append( $('<td>').text( data.name))
.append( $('<td>').text( data.price));
$selectedMenuTable.append($tr);
sum += data.price;
}
});
$('#sum-price').text(sum);
});
}).fail(function( data ) {
}).always(function( data ) {
});
}); http://jsdo.it/itoKami1123/3KAK

APIサーバ
GET

click!
APIサーバ
GET

[
{ "name": "ハンバーガ", "price": 300 },
{ "name": "チーズバーガ", "price": 400 },
{ "name": "照り焼きバーガ", "price": 500 },
{ "name": "スペシャル", "price": 600 }
]
http://jsrun.it/assets/g/q/B/s/gqBsC

var MenuItem = Backbone.Model.extend({
defaults:{
checked: false, // 選択フラグ
name: "", // ハンバーガー名
price: 0 // お値段
},
toggleChecked: function(){
this.set("checked", !this.get("checked") );
}
})

var!MenuList!=!Backbone.Collection.extend({
!!!!model:!MenuItem,
!!!!url:!'/assets/g/q/B/s/gqBsC',
!!!!sumPrice:!function(){
!!!!!!!!var!checkedMenuItems!=!this.where({!checked:true!});
!!!!!!!!var!sum!=!0;
!!!!!!!!_.each(checkedMenuItems,function(model){
!!!!!!!!!!!!sum!+=!model.get("price");
!!!!!!!!});
!!!!!!!!return!sum;
!!!!}
});

Backbone.jsのViewは
Controllerの機能も持ちます！
ご注意！

var!MenuItemView!=!Backbone.View.extend({
!!!!tagName:!'tr',
!!!!model:!null,!//":MenuItem
!!!!initialize:!function(!options){
!!!!!!!!var!menuItem!=!this.model;
!!!!!!!!this.listenTo(!menuItem,!'change',!this.updateRender);
!!!!},
!!!!createRender:!function(){

!!!!!!!!this.listenTo(!menuItem,!'change',!this.updateRender);
!!!!},
!!!!createRender:!function(){
!!!!!!!!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"
!!!!},

!!!!},
!!!!events:!{
!!!!!!!!"click":"onClick_menuItem"
!!!!},
!!!!onClick_menuItem:!function(event){
!!!!!!!!menuItem.toggleChecked();
!!!!},
!!!!updateRender:function!(){
!!!!!!!!var!$chk!=!this.$('input[type="checkbox"]');
!!!!!!!!var!checked!=!menuItem.get("checked");
!!!!!!!!$chk.prop('checked',checked);
!!!!}
});
this.listenTo( menuItem, 'change', this.updateRender);

var SelectedItemView = Backbone.View.extend({
tagName: 'tr',
model: null, // :MenuItem
var selectedItem = this.model;
},
createRender: function(){
var menuItem = this.model;
var name = menuItem.get("name");
var price = menuItem.get("price");
this.$el
.append($('<td>').text(name))
.append($('<td>').text(price));
return this;
}
});

<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',
? ???省略???
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実行 %>
同名プロパティの設定値が
テンプレートの中で使用されます。

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

http://jsdo.it/itoKami1123/A0MI

狠狠撸

叠础颁碍叠翱狈贰.闯厂で惭痴颁始めませんか？

More Related Content

Viewers also liked (7)

More from Toshio Ehara (20)

Recently uploaded (9)

叠础颁碍叠翱狈贰.闯厂で惭痴颁始めませんか？