探索Emberjs制作一個簡單的Todo應(yīng)用
更新時間：2012年11月07日 11:08:10 作者：
使用Emberjs制作一個簡單的Todo應(yīng)用,需要的朋友可以參考下
目標(biāo)
使用Emberjs制作一個簡單的Todo應(yīng)用，實(shí)現(xiàn)這樣一個效果：通過在文本框輸入文本，創(chuàng)建一條代辦事項(xiàng)，代辦事項(xiàng)可以選擇優(yōu)先級，完成的事項(xiàng)可以刪除。
準(zhǔn)備
完成這個應(yīng)用，需要做點(diǎn)準(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)用實(shí)例，這也作為應(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)用的腳本，實(shí)例化一個ember應(yīng)用，順便把MVC各模塊的區(qū)域也加上。腳本代碼如下：
/********************
application
********************/
window.App = Ember.Application.create(
{
ready:function(){
Em.Logger.info('歡迎使用待辦事項(xiàng)應(yīng)用');
}
}
);
/********************
model
********************/
/********************
view
********************/
/********************
controlle
********************/
然后，我們需要一個輸入框來輸入代辦事項(xiàng)，需要創(chuàng)建一個ember文本框視圖。ember視圖可以用Ember.View類來創(chuàng)建（使用create方法）或擴(kuò)展（使用extend方法）一個新的視圖類。不過對于文本框視圖，ember提供了更直接的方式——Ember.TextField類，我們可以先使用這個類來擴(kuò)展一個自定義的視圖，然后再實(shí)例化添加到頁面上。我們將這個文本框視圖類命名AddItemView 。
在腳本代碼里的view區(qū)域添加上文本框視圖代碼：
App.AddItemView = Ember.TextField.extend({
});
可以給它加個提示語，html5支持placeholder，可以拿來用。還需要在按下回車時將內(nèi)容添加到代表事項(xiàng)列表，這里需要用到一個屬性：insertNewline，在按下回車時會調(diào)用相應(yīng)的函數(shù)。加入后的代碼如下：
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項(xiàng)',
insertNewline:function(){}
});
由于現(xiàn)在還沒確定具體添加方法，函數(shù)體暫時先不寫。
用戶在按下回車時增加一條代辦事項(xiàng)，需要一個列表來顯示，在ember中可以創(chuàng)建CollectionView來存放列表項(xiàng)目視圖，對于CollectionView，默認(rèn)會有一個content屬性用于存放列表項(xiàng)目對象，其屬性值是一個數(shù)組。為了讓其列表顯示為ul列表，需要定義CollectionView的標(biāo)簽名（tagName）為“ul”。我們給這個列表視圖命名為ListView，并增加到文本框視圖的下方。最后代碼如下：
App.ListView = Ember.CollectionView.extend({
content:[],
tagName:'ul'
});
現(xiàn)在如果打開頁面，是沒顯示任何內(nèi)容的，因?yàn)橐晥D還沒被渲染，要將視圖顯示出來，需要handlebar模板的支持。
現(xiàn)在來修改html頁面的body塊，加入剛創(chuàng)建的兩個視圖，看看效果。
添加handlebar模板的方法是<script type="text/x-handlebars">/*視圖助手*/</script>，還可以指定模板名稱，在data-template-name屬性里定義，待會我們添加列表項(xiàng)目時會需要用到。
在模板里需要通過視圖助手（helper）來添加視圖，語法也很簡單，用兩個花括號對包裹，里面通過模板關(guān)鍵字來指定要顯示的視圖，如：{{view App.AddItemView}}。其他模板助手可以在handlebar網(wǎng)站查到：http://handlebarsjs.com/。
現(xiàn)在先把文本框跟列表視圖添加到頁面上，修改后的body代碼如下：
<body>
<script type="text/x-handlebars">
<span>請輸入待辦事項(xiàng)：</span>{{view App.AddItemView}}<br/>
{{view App.ListView}}
</script>
</body>
現(xiàn)在刷新頁面，會顯示一句“請輸入代辦事項(xiàng)”跟一個文本框，列表由于沒有內(nèi)容，不會顯示。
這個時候我們可以在content里添加點(diǎn)內(nèi)容，比如content:['a','b','c']，然后刷新頁面，你會發(fā)現(xiàn)列表區(qū)域只有三個小黑點(diǎn)（如果你沒重置列表樣式的話）。因?yàn)槟阍赾ontent里添加了三項(xiàng)，但列表項(xiàng)還沒有指定一個顯示的模板，所以，顯示為空。為了讓你看到效果，我們來給列表項(xiàng)定義個顯示的模板吧。這里需要處理兩個地方，第一是在頁面加指定名稱的模板，第二是在列表視圖里定義列表項(xiàng)目的屬性。
定義列表項(xiàng)目，需要用到itemViewClass，它會將每個content項(xiàng)傳遞進(jìn)去并用指定的模板顯示。先來修改列表視圖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項(xiàng)傳遞給助手，會用到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)在考慮把用戶要添加的項(xiàng)目保存到一個數(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)建，它會把你傳進(jìn)去的普通javascript轉(zhuǎn)變?yōu)橐粋€新的ember數(shù)組對象，我們把用來管理項(xiàng)目的數(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 ，由于綁定作用，列表會自動增加一項(xiàng)。
是時候改造下文本框視圖了，還記得insertNewline嗎？我們可以在這里創(chuàng)建新的項(xiàng)目。我們會用到三個方法：set()設(shè)置屬性值、get()獲取屬性值、pushObject()添加數(shù)據(jù)，修改AddItemView 后的代碼如下：
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項(xiàng)',
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個列表項(xiàng)了。
距離我們的目標(biāo)還有一半啊，我們還缺少兩個功能：選擇優(yōu)先級跟刪除完成的項(xiàng)目。
要增加下拉列表，可以使用另一個方便的視圖：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)的屬性，選中項(xiàng)的綁定需要用到selectionBinding，順便給個文字提示，然后添加到文本框模板的下面，修改后的代碼如下：
<script type="text/x-handlebars">
<span>請輸入待辦事項(xiàng)：</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àng)也出現(xiàn)這個優(yōu)先級，還得花點(diǎn)功夫啊。是時候用model了，我們來創(chuàng)建一個model類，當(dāng)按下回車時，從這個類創(chuàng)建一個實(shí)例，再把實(shí)例扔到todoStore里就可以了，另外，模板也要跟著修改，文本框視圖的創(chuàng)建方法也得改。這次改動比較多了點(diǎn)。另外，還會用到一個計算屬性的功能，當(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表示列表項(xiàng)目要顯示的內(nèi)容，這些屬性名都是自定義的。其中title不需要提供，因?yàn)樗O(shè)置為計算屬性，依賴于status跟value屬性，自動計算獲取，property()方法就是ember函數(shù)轉(zhuǎn)變?yōu)橛嬎銓傩缘姆椒?，后面的參?shù)表示title依賴的屬性，當(dāng)status或value變化時，就會自動給出。
接著修改AddItemView的insertNewline屬性，需要取到兩個數(shù)據(jù)，一個是文本框里的內(nèi)容，一個是下拉列表里選中的項(xiàng)目。文本框的值已經(jīng)知道怎么獲取了，下拉列表的值呢？別忘了我們已經(jīng)將選中項(xiàng)綁定到selectController里的selected屬性了，直接從那里取就可以了。修改后的AddItemView代碼如下：
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項(xiàng)',
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類來實(shí)例化一個待辦項(xiàng)目并添加到todoStore里了，最后是修改項(xiàng)目列表的模板itemTemplate來顯示，在模板里需要取到當(dāng)前項(xiàng)目的title值來顯示，代碼如下：
<script type="text/x-handlebars" data-template-name="itemTemplate">
{{view.content.title}}
</script>
現(xiàn)在添加的新待辦事項(xiàng)會顯示優(yōu)先級了。
好了，最后一個功能，刪除。跟添加pushObject相反，刪除用到的是removeObject。因?yàn)樗秋@示在每個列表項(xiàng)目里的，所以，需要修改itemViewClass跟itemTemplate模板，我們在itemViewClass里添加一個方法，當(dāng)用戶點(diǎn)擊時調(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模板里增加一個接受點(diǎn)擊的鏈接，用到的是action助手，第一個參數(shù)是方法名，target屬性用來指定對象，點(diǎn)擊時調(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)在新增加的項(xiàng)目都會有個叉在右邊，點(diǎn)擊時就把當(dāng)前項(xiàng)目刪除。
最后還可以做點(diǎn)改進(jìn)，當(dāng)鼠標(biāo)移動到項(xiàng)目上時才顯示刪除鏈接，完成這個功能，需要修改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('歡迎使用待辦事項(xiàng)應(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:'輸入待辦事項(xiàng)',
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>請輸入待辦事項(xiàng)：</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)用，實(shí)現(xiàn)這樣一個效果：通過在文本框輸入文本，創(chuàng)建一條代辦事項(xiàng)，代辦事項(xiàng)可以選擇優(yōu)先級，完成的事項(xiàng)可以刪除。
準(zhǔn)備
完成這個應(yīng)用，需要做點(diǎn)準(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)用實(shí)例，這也作為應(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)用的腳本，實(shí)例化一個ember應(yīng)用，順便把MVC各模塊的區(qū)域也加上。腳本代碼如下：
復(fù)制代碼 代碼如下:
/********************
application
********************/
window.App = Ember.Application.create(
{
ready:function(){
Em.Logger.info('歡迎使用待辦事項(xiàng)應(yīng)用');
}
}
);
/********************
model
********************/
/********************
view
********************/
/********************
controlle
********************/
然后，我們需要一個輸入框來輸入代辦事項(xiàng)，需要創(chuàng)建一個ember文本框視圖。ember視圖可以用Ember.View類來創(chuàng)建（使用create方法）或擴(kuò)展（使用extend方法）一個新的視圖類。不過對于文本框視圖，ember提供了更直接的方式——Ember.TextField類，我們可以先使用這個類來擴(kuò)展一個自定義的視圖，然后再實(shí)例化添加到頁面上。我們將這個文本框視圖類命名AddItemView 。
在腳本代碼里的view區(qū)域添加上文本框視圖代碼：
復(fù)制代碼 代碼如下:
App.AddItemView = Ember.TextField.extend({
});
可以給它加個提示語，html5支持placeholder，可以拿來用。還需要在按下回車時將內(nèi)容添加到代表事項(xiàng)列表，這里需要用到一個屬性：insertNewline，在按下回車時會調(diào)用相應(yīng)的函數(shù)。加入后的代碼如下：
復(fù)制代碼 代碼如下:
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項(xiàng)',
insertNewline:function(){}
});
由于現(xiàn)在還沒確定具體添加方法，函數(shù)體暫時先不寫。
用戶在按下回車時增加一條代辦事項(xiàng)，需要一個列表來顯示，在ember中可以創(chuàng)建CollectionView來存放列表項(xiàng)目視圖，對于CollectionView，默認(rèn)會有一個content屬性用于存放列表項(xiàng)目對象，其屬性值是一個數(shù)組。為了讓其列表顯示為ul列表，需要定義CollectionView的標(biāo)簽名（tagName）為“ul”。我們給這個列表視圖命名為ListView，并增加到文本框視圖的下方。最后代碼如下：
復(fù)制代碼 代碼如下:
App.ListView = Ember.CollectionView.extend({
content:[],
tagName:'ul'
});
現(xiàn)在如果打開頁面，是沒顯示任何內(nèi)容的，因?yàn)橐晥D還沒被渲染，要將視圖顯示出來，需要handlebar模板的支持。
現(xiàn)在來修改html頁面的body塊，加入剛創(chuàng)建的兩個視圖，看看效果。
添加handlebar模板的方法是<script type="text/x-handlebars">/*視圖助手*/</script>，還可以指定模板名稱，在data-template-name屬性里定義，待會我們添加列表項(xiàng)目時會需要用到。
在模板里需要通過視圖助手（helper）來添加視圖，語法也很簡單，用兩個花括號對包裹，里面通過模板關(guān)鍵字來指定要顯示的視圖，如：{{view App.AddItemView}}。其他模板助手可以在handlebar網(wǎng)站查到：http://handlebarsjs.com/。
現(xiàn)在先把文本框跟列表視圖添加到頁面上，修改后的body代碼如下：
復(fù)制代碼 代碼如下:
<body>
<script type="text/x-handlebars">
<span>請輸入待辦事項(xiàng)：</span>{{view App.AddItemView}}<br/>
{{view App.ListView}}
</script>
</body>
現(xiàn)在刷新頁面，會顯示一句“請輸入代辦事項(xiàng)”跟一個文本框，列表由于沒有內(nèi)容，不會顯示。
這個時候我們可以在content里添加點(diǎn)內(nèi)容，比如content:['a','b','c']，然后刷新頁面，你會發(fā)現(xiàn)列表區(qū)域只有三個小黑點(diǎn)（如果你沒重置列表樣式的話）。因?yàn)槟阍赾ontent里添加了三項(xiàng)，但列表項(xiàng)還沒有指定一個顯示的模板，所以，顯示為空。為了讓你看到效果，我們來給列表項(xiàng)定義個顯示的模板吧。這里需要處理兩個地方，第一是在頁面加指定名稱的模板，第二是在列表視圖里定義列表項(xiàng)目的屬性。
定義列表項(xiàng)目，需要用到itemViewClass，它會將每個content項(xiàng)傳遞進(jìn)去并用指定的模板顯示。先來修改列表視圖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項(xiàng)傳遞給助手，會用到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)在考慮把用戶要添加的項(xiàng)目保存到一個數(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)建，它會把你傳進(jìn)去的普通javascript轉(zhuǎn)變?yōu)橐粋€新的ember數(shù)組對象，我們把用來管理項(xiàng)目的數(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 ，由于綁定作用，列表會自動增加一項(xiàng)。
是時候改造下文本框視圖了，還記得insertNewline嗎？我們可以在這里創(chuàng)建新的項(xiàng)目。我們會用到三個方法：set()設(shè)置屬性值、get()獲取屬性值、pushObject()添加數(shù)據(jù)，修改AddItemView 后的代碼如下：
復(fù)制代碼 代碼如下:
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項(xiàng)',
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個列表項(xiàng)了。
距離我們的目標(biāo)還有一半啊，我們還缺少兩個功能：選擇優(yōu)先級跟刪除完成的項(xiàng)目。
要增加下拉列表，可以使用另一個方便的視圖：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)的屬性，選中項(xiàng)的綁定需要用到selectionBinding，順便給個文字提示，然后添加到文本框模板的下面，修改后的代碼如下：
復(fù)制代碼 代碼如下:
<script type="text/x-handlebars">
<span>請輸入待辦事項(xiàng)：</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àng)也出現(xiàn)這個優(yōu)先級，還得花點(diǎn)功夫啊。是時候用model了，我們來創(chuàng)建一個model類，當(dāng)按下回車時，從這個類創(chuàng)建一個實(shí)例，再把實(shí)例扔到todoStore里就可以了，另外，模板也要跟著修改，文本框視圖的創(chuàng)建方法也得改。這次改動比較多了點(diǎn)。另外，還會用到一個計算屬性的功能，當(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表示列表項(xiàng)目要顯示的內(nèi)容，這些屬性名都是自定義的。其中title不需要提供，因?yàn)樗O(shè)置為計算屬性，依賴于status跟value屬性，自動計算獲取，property()方法就是ember函數(shù)轉(zhuǎn)變?yōu)橛嬎銓傩缘姆椒?，后面的參?shù)表示title依賴的屬性，當(dāng)status或value變化時，就會自動給出。
接著修改AddItemView的insertNewline屬性，需要取到兩個數(shù)據(jù)，一個是文本框里的內(nèi)容，一個是下拉列表里選中的項(xiàng)目。文本框的值已經(jīng)知道怎么獲取了，下拉列表的值呢？別忘了我們已經(jīng)將選中項(xiàng)綁定到selectController里的selected屬性了，直接從那里取就可以了。修改后的AddItemView代碼如下：
復(fù)制代碼 代碼如下:
App.AddItemView = Ember.TextField.extend({
placeholder:'輸入待辦事項(xiàng)',
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類來實(shí)例化一個待辦項(xiàng)目并添加到todoStore里了，最后是修改項(xiàng)目列表的模板itemTemplate來顯示，在模板里需要取到當(dāng)前項(xiàng)目的title值來顯示，代碼如下：
復(fù)制代碼 代碼如下:
<script type="text/x-handlebars" data-template-name="itemTemplate">
{{view.content.title}}
</script>
現(xiàn)在添加的新待辦事項(xiàng)會顯示優(yōu)先級了。
好了，最后一個功能，刪除。跟添加pushObject相反，刪除用到的是removeObject。因?yàn)樗秋@示在每個列表項(xiàng)目里的，所以，需要修改itemViewClass跟itemTemplate模板，我們在itemViewClass里添加一個方法，當(dāng)用戶點(diǎn)擊時調(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模板里增加一個接受點(diǎn)擊的鏈接，用到的是action助手，第一個參數(shù)是方法名，target屬性用來指定對象，點(diǎn)擊時調(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)在新增加的項(xiàng)目都會有個叉在右邊，點(diǎn)擊時就把當(dāng)前項(xiàng)目刪除。
最后還可以做點(diǎn)改進(jìn)，當(dāng)鼠標(biāo)移動到項(xiàng)目上時才顯示刪除鏈接，完成這個功能，需要修改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('歡迎使用待辦事項(xiàng)應(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:'輸入待辦事項(xiàng)',
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>請輸入待辦事項(xiàng)：</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)文章
非html5實(shí)現(xiàn)js版彈球游戲示例代碼
彈球游戲，一般都是使用html5來實(shí)現(xiàn)的，其實(shí)不然，使用js也可以實(shí)現(xiàn)類似的效果，下面有個不錯的示例，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
一個基于JavaScript的代碼編輯器，CodeMirror支持大量語言的語法高亮,也包括css,html,js等的高亮顯示。此外，CodeMirror還支持代碼自動完成、搜索/替換、HTML預(yù)覽、行號、選擇/搜索結(jié)果高亮、可視化tab、代碼自動格式等2017-03-03
JS實(shí)現(xiàn)的系統(tǒng)調(diào)色板完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的系統(tǒng)調(diào)色板,結(jié)合完整實(shí)例形式分析了js實(shí)現(xiàn)調(diào)色板效果的具體步驟與實(shí)現(xiàn)技巧,涉及js數(shù)值計算與頁面元素操作的方法,需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多文件或者圖片上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了HTML界面登錄時的JS驗(yàn)證方法,需要的朋友可以參考下2014-05-05
js+canvas實(shí)現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動畫
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
Cpage.js給組件綁定事件的實(shí)現(xiàn)代碼
Cpage.js是一款輕量級的Mvvm框架，使用TypeScript（JavaScript的超集）開發(fā)。下面通過本文給大家分享Cpage.js給組件綁定事件的實(shí)現(xiàn)代碼，需要的的朋友參考下吧2017-08-08
Javascript this 的一些學(xué)習(xí)總結(jié)
相信有C++、C#或Java等編程經(jīng)驗(yàn)的各位，對于this關(guān)鍵字再熟悉不過了。由于Javascript是一種面向?qū)ο蟮木幊陶Z言，它和C++、C#或Java一樣都包含this關(guān)鍵字，接下來我們將向大家介紹Javascript中的this關(guān)鍵字2012-08-08
本篇文章我們研究一下，在移動端開發(fā)過程中經(jīng)常使用到的圖片上傳功能，在大多數(shù)小程序或者APP中都會遇到一些實(shí)名認(rèn)證或者頭像上傳的功能，對uniapp小程序?上傳圖片功能感興趣的朋友跟隨小編一起看看吧2023-01-01
這篇文章主要介紹了JavaScript類型判斷的四種方法，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-10-10