探索Emberjs制作一個簡單的Todo應(yīng)用
更新時間：2012年11月07日 11:08:10 作者：
使用Emberjs制作一個簡單的Todo應(yīng)用,需要的朋友可以參考下
目標(biāo)
使用Emberjs制作一個簡單的Todo應(yīng)用，實現(xiàn)這樣一個效果：通過在文本框輸入文本，創(chuàng)建一條代辦事項，代辦事項可以選擇優(yōu)先級，完成的事項可以刪除。
準(zhǔn)備
完成這個應(yīng)用，需要做點準(zhǔn)備：
1、創(chuàng)建一個html頁面，暫時不管樣式；
2、腳本：emberjs，handlebars、jQuery。這三個腳本可以從網(wǎng)上獲得，我們將把他們加入到head標(biāo)簽里去。
制作
創(chuàng)建頁面，加入腳本，就可以開始制作應(yīng)用。html代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember--第一個應(yīng)用</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js"></script>
</head>
<body>
</body>
</html>
按照ember的要求，需要用Ember.Application.create()先創(chuàng)建應(yīng)用實例，這也作為應(yīng)用的命名空間。這個create方法可以傳遞一個對象屬性ready，屬性值是一個函數(shù)，在應(yīng)用準(zhǔn)備就緒時調(diào)用。Ember還可以使用縮寫Em來代替。
在Ember中有一個Em.Logger對象，相當(dāng)于window.console，可以用來調(diào)試。我們可以在這個ready加入一個消息，顯示在控制臺中。
現(xiàn)在，在head標(biāo)簽里再增加一個script標(biāo)簽來寫應(yīng)用的腳本，實例化一個ember應(yīng)用，順便把MVC各模塊的區(qū)域也加上。腳本代碼如下：
/********************
application
********************/
window.App = Ember.Application.create(
{
ready:function(){
Em.Logger.info('歡迎使用待辦事項應(yīng)用');
}
}
);
/********************
model
********************/
/********************
view
********************/
/********************
controlle
********************/
然后，我們需要一個輸入框來輸入代辦事項，需要創(chuàng)建一個ember文本框視圖。ember視圖可以用Ember.View類來創(chuàng)建（使用create方法）或擴展（使用extend方法）一個新的視圖類。不過對于文本框視圖，ember提供了更直接的方式——Ember.TextField類，我們可以先使用這個類來擴展一個自定義的視圖，然后再實例化添加到頁面上。我們將這個文本框視圖類命名AddItemView 。
在腳本代碼里的view區(qū)域添加上文本框視圖代碼：
App.AddItemView = Ember.TextField.extend({
});
可以給它加個提示語，html5支持placeholder，可以拿來用。還需要在按下回車時將內(nèi)容添加到代表事項列表，這里需要用到一個屬性：insertNewline，在按下回車時會調(diào)用相應(yīng)的函數(shù)。加入后的代碼如下：
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項',
insertNewline:function(){}
});
由于現(xiàn)在還沒確定具體添加方法，函數(shù)體暫時先不寫。
用戶在按下回車時增加一條代辦事項，需要一個列表來顯示，在ember中可以創(chuàng)建CollectionView來存放列表項目視圖，對于CollectionView，默認(rèn)會有一個content屬性用于存放列表項目對象，其屬性值是一個數(shù)組。為了讓其列表顯示為ul列表，需要定義CollectionView的標(biāo)簽名（tagName）為“ul”。我們給這個列表視圖命名為ListView，并增加到文本框視圖的下方。最后代碼如下：
App.ListView = Ember.CollectionView.extend({
content:[],
tagName:'ul'
});
現(xiàn)在如果打開頁面，是沒顯示任何內(nèi)容的，因為視圖還沒被渲染，要將視圖顯示出來，需要handlebar模板的支持。
現(xiàn)在來修改html頁面的body塊，加入剛創(chuàng)建的兩個視圖，看看效果。
添加handlebar模板的方法是<script type="text/x-handlebars">/*視圖助手*/</script>，還可以指定模板名稱，在data-template-name屬性里定義，待會我們添加列表項目時會需要用到。
在模板里需要通過視圖助手（helper）來添加視圖，語法也很簡單，用兩個花括號對包裹，里面通過模板關(guān)鍵字來指定要顯示的視圖，如：{{view App.AddItemView}}。其他模板助手可以在handlebar網(wǎng)站查到：http://handlebarsjs.com/。
現(xiàn)在先把文本框跟列表視圖添加到頁面上，修改后的body代碼如下：
<body>
<script type="text/x-handlebars">
<span>請輸入待辦事項：</span>{{view App.AddItemView}}<br/>
{{view App.ListView}}
</script>
</body>
現(xiàn)在刷新頁面，會顯示一句“請輸入代辦事項”跟一個文本框，列表由于沒有內(nèi)容，不會顯示。
這個時候我們可以在content里添加點內(nèi)容，比如content:['a','b','c']，然后刷新頁面，你會發(fā)現(xiàn)列表區(qū)域只有三個小黑點（如果你沒重置列表樣式的話）。因為你在content里添加了三項，但列表項還沒有指定一個顯示的模板，所以，顯示為空。為了讓你看到效果，我們來給列表項定義個顯示的模板吧。這里需要處理兩個地方，第一是在頁面加指定名稱的模板，第二是在列表視圖里定義列表項目的屬性。
定義列表項目，需要用到itemViewClass，它會將每個content項傳遞進去并用指定的模板顯示。先來修改列表視圖ListView 吧，給它增加itemViewClass屬性，這也是一種視圖，所以需要用Ember.View來創(chuàng)建，在創(chuàng)建時同時指定用來顯示的模板名稱為itemTemplate，這個名稱同時將為出現(xiàn)在html的handlebar模板名稱里。修改后的代碼如下：
App.ListView = Ember.CollectionView.extend({
content:['a','b','c'],
tagName:'ul',
itemViewClass: Ember.View.extend({
templateName:'itemTemplate',
})
});
還差一步就完成了，現(xiàn)在來修改html，我們需要在body里再新建一個handlebar模板，并且會用到上面給出的模板名稱，代碼如下：
<script type="text/x-handlebars" data-template-name="itemTemplate">
</script>
接著同樣是添加模板助手，要把每一個content項傳遞給助手，會用到view.content。添加如下代碼：
<script type="text/x-handlebars" data-template-name="itemTemplate">
{{view.content}}
</script>
完成后，刷新頁面，現(xiàn)在終于把content里的內(nèi)容顯示出來了，而且，模板會自動加上li標(biāo)簽。
繼續(xù)完善我們的應(yīng)用。我們總不能把content的內(nèi)容寫成固定的吧，這樣用戶還怎么添加呢。所以，現(xiàn)在考慮把用戶要添加的項目保存到一個數(shù)組里，然后content自己去取這個數(shù)組的內(nèi)容。同時，ember框架支持雙向綁定，當(dāng)數(shù)組內(nèi)容修改時，通過綁定的content也會同時改變，反之亦然?，F(xiàn)在，就創(chuàng)建一個ember數(shù)組，然后跟content綁定吧。
ember數(shù)組可以通過ArrayController類來創(chuàng)建，它會把你傳進去的普通javascript轉(zhuǎn)變?yōu)橐粋€新的ember數(shù)組對象，我們把用來管理項目的數(shù)組命名為todoStore，放到html頁面的controller區(qū)域，創(chuàng)建的代碼如下：
App.todoStore = Ember.ArrayController.create({
content:[]
});
現(xiàn)在可以把ListView 里的content數(shù)組放到這個todoStore 的數(shù)組里，然后綁定ListView 里的content到todoStore 上，這兩個對象將修改為如下所示：
App.ListView = Ember.CollectionView.extend({
contentBinding:'App.todoStore',
tagName:'ul',
itemViewClass: Ember.View.extend({
templateName:'itemTemplate'
})
});
/********************
controlle
********************/
App.todoStore = Ember.ArrayController.create({
content:['a','b','c']
});
Binding是個后綴，表示綁定，屬性值是綁定的對象，默認(rèn)取該對象的content屬性。修改完成后刷新頁面，如果你看到的頁面跟修改之前的一樣，說明修改成功了。接著，是時候去掉content里的值了，我們需要的數(shù)據(jù)將由用戶在文本框里輸入。
考慮現(xiàn)在的交互過程，用戶在文本框輸入內(nèi)容，按下回車，程序獲取到該事件，調(diào)用一個方法創(chuàng)建一個新對象，再把這個新對象送給todoStore ，由于綁定作用，列表會自動增加一項。
是時候改造下文本框視圖了，還記得insertNewline嗎？我們可以在這里創(chuàng)建新的項目。我們會用到三個方法：set()設(shè)置屬性值、get()獲取屬性值、pushObject()添加數(shù)據(jù)，修改AddItemView 后的代碼如下：
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項',
insertNewline:function(){
var item = this.get('value');
App.todoStore.pushObject(item);
this.set('value','');
}
});
現(xiàn)在刷新頁面，然后輸入內(nèi)容，按回車，列表會添加輸入的內(nèi)容，說明修改成功，如果你沒把todoStore 的content屬性里的內(nèi)容清空的話，現(xiàn)在會有4個列表項了。
距離我們的目標(biāo)還有一半啊，我們還缺少兩個功能：選擇優(yōu)先級跟刪除完成的項目。
要增加下拉列表，可以使用另一個方便的視圖：Ember.Select。我們可以直接在模板里直接創(chuàng)建一個，同樣通過綁定，把下拉列表視圖的content綁定到另一個ember對象上，然后設(shè)置默認(rèn)選中的優(yōu)先級。優(yōu)先級也需要用到綁定，這樣在頁面上選擇的時候，才會同時修改對應(yīng)的ember對象里的內(nèi)容。先來創(chuàng)建這個ember對象，自定義該對象的selected屬性表示選中的值，其他名稱也行，這段代碼會加到todoStore對象的下面，命名為selectController，代碼如下：
App.selectController = Ember.Object.create({
selected:'低',
content:['高','中','低']
});
然后增加一個模板助手，并綁定selectController 里對應(yīng)的屬性，選中項的綁定需要用到selectionBinding，順便給個文字提示，然后添加到文本框模板的下面，修改后的代碼如下：
<script type="text/x-handlebars">
<span>請輸入待辦事項：</span>{{view App.AddItemView}}<br/>
<span>請選擇優(yōu)先級：</span>{{view Ember.Select contentBinding="App.selectController.content" selectionBinding="App.selectController.selected"}}
{{view App.ListView}}
</script>
現(xiàn)在刷新頁面就會出現(xiàn)下拉列表了。
要想讓列表項也出現(xiàn)這個優(yōu)先級，還得花點功夫啊。是時候用model了，我們來創(chuàng)建一個model類，當(dāng)按下回車時，從這個類創(chuàng)建一個實例，再把實例扔到todoStore里就可以了，另外，模板也要跟著修改，文本框視圖的創(chuàng)建方法也得改。這次改動比較多了點。另外，還會用到一個計算屬性的功能，當(dāng)依賴的屬性變化時，自動更新。把這個model命名為TodoModel，放到model區(qū)域，創(chuàng)建代碼如下：
/********************
model
********************/
App.TodoModel = Em.Object.extend({
status:'',
value:'',
title:function(){
return '['+this.get('status')+']'+this.get('value');
}.property('status','value')
});
status表示選擇的優(yōu)先級，value表示文本框里的值，title表示列表項目要顯示的內(nèi)容，這些屬性名都是自定義的。其中title不需要提供，因為它設(shè)置為計算屬性，依賴于status跟value屬性，自動計算獲取，property()方法就是ember函數(shù)轉(zhuǎn)變?yōu)橛嬎銓傩缘姆椒?，后面的參?shù)表示title依賴的屬性，當(dāng)status或value變化時，就會自動給出。
接著修改AddItemView的insertNewline屬性，需要取到兩個數(shù)據(jù)，一個是文本框里的內(nèi)容，一個是下拉列表里選中的項目。文本框的值已經(jīng)知道怎么獲取了，下拉列表的值呢？別忘了我們已經(jīng)將選中項綁定到selectController里的selected屬性了，直接從那里取就可以了。修改后的AddItemView代碼如下：
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項',
elementId:'add',
insertNewline:function(){
var item = App.TodoModel.create({
status:App.selectController.get('selected'),
value:this.get('value')
});
App.todoStore.pushObject(item);
this.set('value','');
}
});
現(xiàn)在可以通過TodoModel類來實例化一個待辦項目并添加到todoStore里了，最后是修改項目列表的模板itemTemplate來顯示，在模板里需要取到當(dāng)前項目的title值來顯示，代碼如下：
<script type="text/x-handlebars" data-template-name="itemTemplate">
{{view.content.title}}
</script>
現(xiàn)在添加的新待辦事項會顯示優(yōu)先級了。
好了，最后一個功能，刪除。跟添加pushObject相反，刪除用到的是removeObject。因為它是顯示在每個列表項目里的，所以，需要修改itemViewClass跟itemTemplate模板，我們在itemViewClass里添加一個方法，當(dāng)用戶點擊時調(diào)用，把該方法命名為removeItem，代碼如下：
App.ListView = Ember.CollectionView.extend({
contentBinding:'App.todoStore',
tagName:'ul',
itemViewClass: Ember.View.extend({
templateName:'itemTemplate',
removeItem:function(){this.getPath( 'contentView.content' ).removeObject(this.get( 'content' ));}
})
});
最后是在itemTemplate模板里增加一個接受點擊的鏈接，用到的是action助手，第一個參數(shù)是方法名，target屬性用來指定對象，點擊時調(diào)用指定對象下的方法。修改后的itemTemplate代碼如下：
<script type="text/x-handlebars" data-template-name="itemTemplate">
{{view.content.title}} <a href="#" {{action removeItem target="this"}} >X</a>
</script>
現(xiàn)在新增加的項目都會有個叉在右邊，點擊時就把當(dāng)前項目刪除。
最后還可以做點改進，當(dāng)鼠標(biāo)移動到項目上時才顯示刪除鏈接，完成這個功能，需要修改itemViewClass以及在模板里增加邏輯判斷助手{{#if}}。你可以自己試著去做，也可以看看最后完整的代碼。
full code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember--第一個應(yīng)用</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js"></script>
<script>
/********************
application
********************/
window.App = Ember.Application.create(
{
ready:function(){
Em.Logger.info('歡迎使用待辦事項應(yīng)用');
}
}
);
/********************
model
********************/
App.TodoModel = Em.Object.extend({
status:'',
value:'',
title:function(){
return '['+this.get('status')+']'+this.get('value');
}.property('status','value')
});
/********************
view
********************/
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項',
elementId:'add',
insertNewline:function(){
var item = App.TodoModel.create({
status:App.selectController.get('selected'),
value:this.get('value')
});
App.todoStore.pushObject(item);
this.set('value','');
}
});
App.ListView = Ember.CollectionView.extend({
contentBinding:'App.todoStore',
tagName:'ul',
itemViewClass: Ember.View.extend({
templateName:'itemTemplate',
removeItem:function(){this.getPath( 'contentView.content' ).removeObject(this.get( 'content' ));},
mouseEnter:function(){this.set('hover',true);},
mouseLeave:function(){this.set('hover',false);}
})
});
/********************
controlle
********************/
App.todoStore = Ember.ArrayController.create({
content:[]
});
App.selectController = Ember.Object.create({
selected:'低',
content:['高','中','低']
});
</script>
</head>
<body>
<script type="text/x-handlebars">
<span>請輸入待辦事項：</span>{{view App.AddItemView}}<br/>
<span>請選擇優(yōu)先級：</span>{{view Ember.Select contentBinding="App.selectController.content"
selectionBinding="App.selectController.selected"}}
{{view App.ListView}}
</script>
<script type="text/x-handlebars" data-template-name="itemTemplate">
{{view.content.title}} {{#if view.hover}}<a href="#" {{action removeItem target="this"}} >X</a>{{/if}}
</script>
</body>
</html>
使用Emberjs制作一個簡單的Todo應(yīng)用，實現(xiàn)這樣一個效果：通過在文本框輸入文本，創(chuàng)建一條代辦事項，代辦事項可以選擇優(yōu)先級，完成的事項可以刪除。
準(zhǔn)備
完成這個應(yīng)用，需要做點準(zhǔn)備：
1、創(chuàng)建一個html頁面，暫時不管樣式；
2、腳本：emberjs，handlebars、jQuery。這三個腳本可以從網(wǎng)上獲得，我們將把他們加入到head標(biāo)簽里去。
制作
創(chuàng)建頁面，加入腳本，就可以開始制作應(yīng)用。html代碼如下：
復(fù)制代碼 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember--第一個應(yīng)用</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js"></script>
</head>
<body>
</body>
</html>
按照ember的要求，需要用Ember.Application.create()先創(chuàng)建應(yīng)用實例，這也作為應(yīng)用的命名空間。這個create方法可以傳遞一個對象屬性ready，屬性值是一個函數(shù)，在應(yīng)用準(zhǔn)備就緒時調(diào)用。Ember還可以使用縮寫Em來代替。
在Ember中有一個Em.Logger對象，相當(dāng)于window.console，可以用來調(diào)試。我們可以在這個ready加入一個消息，顯示在控制臺中。
現(xiàn)在，在head標(biāo)簽里再增加一個script標(biāo)簽來寫應(yīng)用的腳本，實例化一個ember應(yīng)用，順便把MVC各模塊的區(qū)域也加上。腳本代碼如下：
復(fù)制代碼 代碼如下:
/********************
application
********************/
window.App = Ember.Application.create(
{
ready:function(){
Em.Logger.info('歡迎使用待辦事項應(yīng)用');
}
}
);
/********************
model
********************/
/********************
view
********************/
/********************
controlle
********************/
然后，我們需要一個輸入框來輸入代辦事項，需要創(chuàng)建一個ember文本框視圖。ember視圖可以用Ember.View類來創(chuàng)建（使用create方法）或擴展（使用extend方法）一個新的視圖類。不過對于文本框視圖，ember提供了更直接的方式——Ember.TextField類，我們可以先使用這個類來擴展一個自定義的視圖，然后再實例化添加到頁面上。我們將這個文本框視圖類命名AddItemView 。
在腳本代碼里的view區(qū)域添加上文本框視圖代碼：
復(fù)制代碼 代碼如下:
App.AddItemView = Ember.TextField.extend({
});
可以給它加個提示語，html5支持placeholder，可以拿來用。還需要在按下回車時將內(nèi)容添加到代表事項列表，這里需要用到一個屬性：insertNewline，在按下回車時會調(diào)用相應(yīng)的函數(shù)。加入后的代碼如下：
復(fù)制代碼 代碼如下:
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項',
insertNewline:function(){}
});
由于現(xiàn)在還沒確定具體添加方法，函數(shù)體暫時先不寫。
用戶在按下回車時增加一條代辦事項，需要一個列表來顯示，在ember中可以創(chuàng)建CollectionView來存放列表項目視圖，對于CollectionView，默認(rèn)會有一個content屬性用于存放列表項目對象，其屬性值是一個數(shù)組。為了讓其列表顯示為ul列表，需要定義CollectionView的標(biāo)簽名（tagName）為“ul”。我們給這個列表視圖命名為ListView，并增加到文本框視圖的下方。最后代碼如下：
復(fù)制代碼 代碼如下:
App.ListView = Ember.CollectionView.extend({
content:[],
tagName:'ul'
});
現(xiàn)在如果打開頁面，是沒顯示任何內(nèi)容的，因為視圖還沒被渲染，要將視圖顯示出來，需要handlebar模板的支持。
現(xiàn)在來修改html頁面的body塊，加入剛創(chuàng)建的兩個視圖，看看效果。
添加handlebar模板的方法是<script type="text/x-handlebars">/*視圖助手*/</script>，還可以指定模板名稱，在data-template-name屬性里定義，待會我們添加列表項目時會需要用到。
在模板里需要通過視圖助手（helper）來添加視圖，語法也很簡單，用兩個花括號對包裹，里面通過模板關(guān)鍵字來指定要顯示的視圖，如：{{view App.AddItemView}}。其他模板助手可以在handlebar網(wǎng)站查到：http://handlebarsjs.com/。
現(xiàn)在先把文本框跟列表視圖添加到頁面上，修改后的body代碼如下：
復(fù)制代碼 代碼如下:
<body>
<script type="text/x-handlebars">
<span>請輸入待辦事項：</span>{{view App.AddItemView}}<br/>
{{view App.ListView}}
</script>
</body>
現(xiàn)在刷新頁面，會顯示一句“請輸入代辦事項”跟一個文本框，列表由于沒有內(nèi)容，不會顯示。
這個時候我們可以在content里添加點內(nèi)容，比如content:['a','b','c']，然后刷新頁面，你會發(fā)現(xiàn)列表區(qū)域只有三個小黑點（如果你沒重置列表樣式的話）。因為你在content里添加了三項，但列表項還沒有指定一個顯示的模板，所以，顯示為空。為了讓你看到效果，我們來給列表項定義個顯示的模板吧。這里需要處理兩個地方，第一是在頁面加指定名稱的模板，第二是在列表視圖里定義列表項目的屬性。
定義列表項目，需要用到itemViewClass，它會將每個content項傳遞進去并用指定的模板顯示。先來修改列表視圖ListView 吧，給它增加itemViewClass屬性，這也是一種視圖，所以需要用Ember.View來創(chuàng)建，在創(chuàng)建時同時指定用來顯示的模板名稱為itemTemplate，這個名稱同時將為出現(xiàn)在html的handlebar模板名稱里。修改后的代碼如下：
復(fù)制代碼 代碼如下:
App.ListView = Ember.CollectionView.extend({
content:['a','b','c'],
tagName:'ul',
itemViewClass: Ember.View.extend({
templateName:'itemTemplate',
})
});
還差一步就完成了，現(xiàn)在來修改html，我們需要在body里再新建一個handlebar模板，并且會用到上面給出的模板名稱，代碼如下：
復(fù)制代碼 代碼如下:
<script type="text/x-handlebars" data-template-name="itemTemplate">
</script>
接著同樣是添加模板助手，要把每一個content項傳遞給助手，會用到view.content。添加如下代碼：
復(fù)制代碼 代碼如下:
<script type="text/x-handlebars" data-template-name="itemTemplate">
{{view.content}}
</script>
完成后，刷新頁面，現(xiàn)在終于把content里的內(nèi)容顯示出來了，而且，模板會自動加上li標(biāo)簽。
繼續(xù)完善我們的應(yīng)用。我們總不能把content的內(nèi)容寫成固定的吧，這樣用戶還怎么添加呢。所以，現(xiàn)在考慮把用戶要添加的項目保存到一個數(shù)組里，然后content自己去取這個數(shù)組的內(nèi)容。同時，ember框架支持雙向綁定，當(dāng)數(shù)組內(nèi)容修改時，通過綁定的content也會同時改變，反之亦然?，F(xiàn)在，就創(chuàng)建一個ember數(shù)組，然后跟content綁定吧。
ember數(shù)組可以通過ArrayController類來創(chuàng)建，它會把你傳進去的普通javascript轉(zhuǎn)變?yōu)橐粋€新的ember數(shù)組對象，我們把用來管理項目的數(shù)組命名為todoStore，放到html頁面的controller區(qū)域，創(chuàng)建的代碼如下：
復(fù)制代碼 代碼如下:
App.todoStore = Ember.ArrayController.create({
content:[]
});
現(xiàn)在可以把ListView 里的content數(shù)組放到這個todoStore 的數(shù)組里，然后綁定ListView 里的content到todoStore 上，這兩個對象將修改為如下所示：
復(fù)制代碼 代碼如下:
App.ListView = Ember.CollectionView.extend({
contentBinding:'App.todoStore',
tagName:'ul',
itemViewClass: Ember.View.extend({
templateName:'itemTemplate'
})
});
/********************
controlle
********************/
App.todoStore = Ember.ArrayController.create({
content:['a','b','c']
});
Binding是個后綴，表示綁定，屬性值是綁定的對象，默認(rèn)取該對象的content屬性。修改完成后刷新頁面，如果你看到的頁面跟修改之前的一樣，說明修改成功了。接著，是時候去掉content里的值了，我們需要的數(shù)據(jù)將由用戶在文本框里輸入。
考慮現(xiàn)在的交互過程，用戶在文本框輸入內(nèi)容，按下回車，程序獲取到該事件，調(diào)用一個方法創(chuàng)建一個新對象，再把這個新對象送給todoStore ，由于綁定作用，列表會自動增加一項。
是時候改造下文本框視圖了，還記得insertNewline嗎？我們可以在這里創(chuàng)建新的項目。我們會用到三個方法：set()設(shè)置屬性值、get()獲取屬性值、pushObject()添加數(shù)據(jù)，修改AddItemView 后的代碼如下：
復(fù)制代碼 代碼如下:
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項',
insertNewline:function(){
var item = this.get('value');
App.todoStore.pushObject(item);
this.set('value','');
}
});
現(xiàn)在刷新頁面，然后輸入內(nèi)容，按回車，列表會添加輸入的內(nèi)容，說明修改成功，如果你沒把todoStore 的content屬性里的內(nèi)容清空的話，現(xiàn)在會有4個列表項了。
距離我們的目標(biāo)還有一半啊，我們還缺少兩個功能：選擇優(yōu)先級跟刪除完成的項目。
要增加下拉列表，可以使用另一個方便的視圖：Ember.Select。我們可以直接在模板里直接創(chuàng)建一個，同樣通過綁定，把下拉列表視圖的content綁定到另一個ember對象上，然后設(shè)置默認(rèn)選中的優(yōu)先級。優(yōu)先級也需要用到綁定，這樣在頁面上選擇的時候，才會同時修改對應(yīng)的ember對象里的內(nèi)容。先來創(chuàng)建這個ember對象，自定義該對象的selected屬性表示選中的值，其他名稱也行，這段代碼會加到todoStore對象的下面，命名為selectController，代碼如下：
復(fù)制代碼 代碼如下:
App.selectController = Ember.Object.create({
selected:'低',
content:['高','中','低']
});
然后增加一個模板助手，并綁定selectController 里對應(yīng)的屬性，選中項的綁定需要用到selectionBinding，順便給個文字提示，然后添加到文本框模板的下面，修改后的代碼如下：
復(fù)制代碼 代碼如下:
<script type="text/x-handlebars">
<span>請輸入待辦事項：</span>{{view App.AddItemView}}<br/>
<span>請選擇優(yōu)先級：</span>{{view Ember.Select contentBinding="App.selectController.content" selectionBinding="App.selectController.selected"}}
{{view App.ListView}}
</script>
現(xiàn)在刷新頁面就會出現(xiàn)下拉列表了。
要想讓列表項也出現(xiàn)這個優(yōu)先級，還得花點功夫啊。是時候用model了，我們來創(chuàng)建一個model類，當(dāng)按下回車時，從這個類創(chuàng)建一個實例，再把實例扔到todoStore里就可以了，另外，模板也要跟著修改，文本框視圖的創(chuàng)建方法也得改。這次改動比較多了點。另外，還會用到一個計算屬性的功能，當(dāng)依賴的屬性變化時，自動更新。把這個model命名為TodoModel，放到model區(qū)域，創(chuàng)建代碼如下：
復(fù)制代碼 代碼如下:
/********************
model
********************/
App.TodoModel = Em.Object.extend({
status:'',
value:'',
title:function(){
return '['+this.get('status')+']'+this.get('value');
}.property('status','value')
});
status表示選擇的優(yōu)先級，value表示文本框里的值，title表示列表項目要顯示的內(nèi)容，這些屬性名都是自定義的。其中title不需要提供，因為它設(shè)置為計算屬性，依賴于status跟value屬性，自動計算獲取，property()方法就是ember函數(shù)轉(zhuǎn)變?yōu)橛嬎銓傩缘姆椒?，后面的參?shù)表示title依賴的屬性，當(dāng)status或value變化時，就會自動給出。
接著修改AddItemView的insertNewline屬性，需要取到兩個數(shù)據(jù)，一個是文本框里的內(nèi)容，一個是下拉列表里選中的項目。文本框的值已經(jīng)知道怎么獲取了，下拉列表的值呢？別忘了我們已經(jīng)將選中項綁定到selectController里的selected屬性了，直接從那里取就可以了。修改后的AddItemView代碼如下：
復(fù)制代碼 代碼如下:
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項',
elementId:'add',
insertNewline:function(){
var item = App.TodoModel.create({
status:App.selectController.get('selected'),
value:this.get('value')
});
App.todoStore.pushObject(item);
this.set('value','');
}
});
現(xiàn)在可以通過TodoModel類來實例化一個待辦項目并添加到todoStore里了，最后是修改項目列表的模板itemTemplate來顯示，在模板里需要取到當(dāng)前項目的title值來顯示，代碼如下：
復(fù)制代碼 代碼如下:
<script type="text/x-handlebars" data-template-name="itemTemplate">
{{view.content.title}}
</script>
現(xiàn)在添加的新待辦事項會顯示優(yōu)先級了。
好了，最后一個功能，刪除。跟添加pushObject相反，刪除用到的是removeObject。因為它是顯示在每個列表項目里的，所以，需要修改itemViewClass跟itemTemplate模板，我們在itemViewClass里添加一個方法，當(dāng)用戶點擊時調(diào)用，把該方法命名為removeItem，代碼如下：
復(fù)制代碼 代碼如下:
App.ListView = Ember.CollectionView.extend({
contentBinding:'App.todoStore',
tagName:'ul',
itemViewClass: Ember.View.extend({
templateName:'itemTemplate',
removeItem:function(){this.getPath( 'contentView.content' ).removeObject(this.get( 'content' ));}
})
});
最后是在itemTemplate模板里增加一個接受點擊的鏈接，用到的是action助手，第一個參數(shù)是方法名，target屬性用來指定對象，點擊時調(diào)用指定對象下的方法。修改后的itemTemplate代碼如下：
復(fù)制代碼 代碼如下:
<script type="text/x-handlebars" data-template-name="itemTemplate">
{{view.content.title}} <a href="#" {{action removeItem target="this"}} >X</a>
</script>
現(xiàn)在新增加的項目都會有個叉在右邊，點擊時就把當(dāng)前項目刪除。
最后還可以做點改進，當(dāng)鼠標(biāo)移動到項目上時才顯示刪除鏈接，完成這個功能，需要修改itemViewClass以及在模板里增加邏輯判斷助手{{#if}}。你可以自己試著去做，也可以看看最后完整的代碼。
復(fù)制代碼 代碼如下:
full code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ember--第一個應(yīng)用</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js"></script>
<script>
/********************
application
********************/
window.App = Ember.Application.create(
{
ready:function(){
Em.Logger.info('歡迎使用待辦事項應(yīng)用');
}
}
);
/********************
model
********************/
App.TodoModel = Em.Object.extend({
status:'',
value:'',
title:function(){
return '['+this.get('status')+']'+this.get('value');
}.property('status','value')
});
/********************
view
********************/
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項',
elementId:'add',
insertNewline:function(){
var item = App.TodoModel.create({
status:App.selectController.get('selected'),
value:this.get('value')
});
App.todoStore.pushObject(item);
this.set('value','');
}
});
App.ListView = Ember.CollectionView.extend({
contentBinding:'App.todoStore',
tagName:'ul',
itemViewClass: Ember.View.extend({
templateName:'itemTemplate',
removeItem:function(){this.getPath( 'contentView.content' ).removeObject(this.get( 'content' ));},
mouseEnter:function(){this.set('hover',true);},
mouseLeave:function(){this.set('hover',false);}
})
});
/********************
controlle
********************/
App.todoStore = Ember.ArrayController.create({
content:[]
});
App.selectController = Ember.Object.create({
selected:'低',
content:['高','中','低']
});
</script>
</head>
<body>
<script type="text/x-handlebars">
<span>請輸入待辦事項：</span>{{view App.AddItemView}}<br/>
<span>請選擇優(yōu)先級：</span>{{view Ember.Select contentBinding="App.selectController.content"
selectionBinding="App.selectController.selected"}}
{{view App.ListView}}
</script>
<script type="text/x-handlebars" data-template-name="itemTemplate">
{{view.content.title}} {{#if view.hover}}<a href="#" {{action removeItem target="this"}} >X</a>{{/if}}
</script>
</body>
</html>
相關(guān)文章
escape()、encodeURI()、encodeURIComponent()三種方法都能對一些影響URL完整性的特殊字符進行過濾。2010-11-11
JavaScript實現(xiàn)table切換的插件封裝
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)table切換的插件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了基于Bootstrap框架實現(xiàn)圖片切換的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
圖片自動或手動切換，想必會在很多地方有見過吧，本文將為大家介紹的是使用原生javascript實現(xiàn)的焦點圖切換，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了20個JS簡寫技巧提升工作效率，本文特點以言簡意賅為主，圍繞JS簡寫技巧的話題展開全文，具有一定的查看價值 ，需要的小伙伴可以參考一下2021-12-12
這篇文章主要介紹了ECMAScript6塊級作用域及新變量聲明（let） 的相關(guān)資料,需要的朋友可以參考下2015-06-06
Javascript中將變量轉(zhuǎn)換為字符串的三種方法
這篇文章主要給大家介紹了關(guān)于Javascript中將變量轉(zhuǎn)換為字符串的三種方法，這三種方法分別是：value.toString()、"" + value和String(value)，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
JS實現(xiàn)table表格內(nèi)針對某列內(nèi)容進行即時搜索篩選功能
這篇文章主要介紹了JS實現(xiàn)table表格內(nèi)針對某列內(nèi)容進行即時搜索篩選功能,涉及javascript針對HTML元素的遍歷、屬性動態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
前進后退實現(xiàn)的前提是：images文件夾下圖片的命名是從1~5.jpg有規(guī)律的，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
這篇文章主要給大家介紹了關(guān)于js回文數(shù)的4種判斷方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06