探索Emberjs制作一個簡單的Todo應用

更新時間：2012年11月07日 11:08:10 作者：

使用Emberjs制作一個簡單的Todo應用,需要的朋友可以參考下

目標
使用Emberjs制作一個簡單的Todo應用，實現(xiàn)這樣一個效果：通過在文本框輸入文本，創(chuàng)建一條代辦事項，代辦事項可以選擇優(yōu)先級，完成的事項可以刪除。

準備
完成這個應用，需要做點準備：
1、創(chuàng)建一個html頁面，暫時不管樣式；
2、腳本：emberjs，handlebars、jQuery。這三個腳本可以從網(wǎng)上獲得，我們將把他們加入到head標簽里去。

制作
創(chuàng)建頁面，加入腳本，就可以開始制作應用。html代碼如下：

復制代碼代碼如下:

 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Ember--第一個應用</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)建應用實例，這也作為應用的命名空間。這個create方法可以傳遞一個對象屬性ready，屬性值是一個函數(shù)，在應用準備就緒時調(diào)用。Ember還可以使用縮寫Em來代替。

在Ember中有一個Em.Logger對象，相當于window.console，可以用來調(diào)試。我們可以在這個ready加入一個消息，顯示在控制臺中。

現(xiàn)在，在head標簽里再增加一個script標簽來寫應用的腳本，實例化一個ember應用，順便把MVC各模塊的區(qū)域也加上。腳本代碼如下：

復制代碼代碼如下:

 
/******************** 
application 
********************/ 

window.App = Ember.Application.create( 
{ 
ready:function(){ 
Em.Logger.info('歡迎使用待辦事項應用'); 
} 
} 
); 

/******************** 
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)用相應的函數(shù)。加入后的代碼如下：

復制代碼代碼如下:

 
App.AddItemView = Ember.TextField.extend({ 
placeholder:'輸入待辦事項', 
insertNewline:function(){} 
}); 

由于現(xiàn)在還沒確定具體添加方法，函數(shù)體暫時先不寫。

用戶在按下回車時增加一條代辦事項，需要一個列表來顯示，在ember中可以創(chuàng)建CollectionView來存放列表項目視圖，對于CollectionView，默認會有一個content屬性用于存放列表項目對象，其屬性值是一個數(shù)組。為了讓其列表顯示為ul列表，需要定義CollectionView的標簽名（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標簽。

繼續(xù)完善我們的應用。我們總不能把content的內(nèi)容寫成固定的吧，這樣用戶還怎么添加呢。所以，現(xiàn)在考慮把用戶要添加的項目保存到一個數(shù)組里，然后content自己去取這個數(shù)組的內(nèi)容。同時，ember框架支持雙向綁定，當數(shù)組內(nèi)容修改時，通過綁定的content也會同時改變，反之亦然。現(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是個后綴，表示綁定，屬性值是綁定的對象，默認取該對象的content屬性。修改完成后刷新頁面，如果你看到的頁面跟修改之前的一樣，說明修改成功了。接著，是時候去掉content里的值了，我們需要的數(shù)據(jù)將由用戶在文本框里輸入。

考慮現(xiàn)在的交互過程，用戶在文本框輸入內(nèi)容，按下回車，程序獲取到該事件，調(diào)用一個方法創(chuàng)建一個新對象，再把這個新對象送給todoStore ，由于綁定作用，列表會自動增加一項。

是時候改造下文本框視圖了，還記得insertNewline嗎？我們可以在這里創(chuàng)建新的項目。我們會用到三個方法：set()設置屬性值、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個列表項了。

距離我們的目標還有一半啊，我們還缺少兩個功能：選擇優(yōu)先級跟刪除完成的項目。

要增加下拉列表，可以使用另一個方便的視圖：Ember.Select。我們可以直接在模板里直接創(chuàng)建一個，同樣通過綁定，把下拉列表視圖的content綁定到另一個ember對象上，然后設置默認選中的優(yōu)先級。優(yōu)先級也需要用到綁定，這樣在頁面上選擇的時候，才會同時修改對應的ember對象里的內(nèi)容。先來創(chuàng)建這個ember對象，自定義該對象的selected屬性表示選中的值，其他名稱也行，這段代碼會加到todoStore對象的下面，命名為selectController，代碼如下：

復制代碼代碼如下:

 
App.selectController = Ember.Object.create({ 
selected:'低', 
content:['高','中','低'] 
}); 

然后增加一個模板助手，并綁定selectController 里對應的屬性，選中項的綁定需要用到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類，當按下回車時，從這個類創(chuàng)建一個實例，再把實例扔到todoStore里就可以了，另外，模板也要跟著修改，文本框視圖的創(chuà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不需要提供，因為它設置為計算屬性，依賴于status跟value屬性，自動計算獲取，property()方法就是ember函數(shù)轉(zhuǎn)變?yōu)橛嬎銓傩缘姆椒?，后面的參?shù)表示title依賴的屬性，當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來顯示，在模板里需要取到當前項目的title值來顯示，代碼如下：

復制代碼代碼如下:

 
<script type="text/x-handlebars" data-template-name="itemTemplate"> 
{{view.content.title}} 
</script> 

現(xiàn)在添加的新待辦事項會顯示優(yōu)先級了。

好了，最后一個功能，刪除。跟添加pushObject相反，刪除用到的是removeObject。因為它是顯示在每個列表項目里的，所以，需要修改itemViewClass跟itemTemplate模板，我們在itemViewClass里添加一個方法，當用戶點擊時調(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)在新增加的項目都會有個叉在右邊，點擊時就把當前項目刪除。

最后還可以做點改進，當鼠標移動到項目上時才顯示刪除鏈接，完成這個功能，需要修改itemViewClass以及在模板里增加邏輯判斷助手{{#if}}。你可以自己試著去做，也可以看看最后完整的代碼。

復制代碼代碼如下:

 
full code 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Ember--第一個應用</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('歡迎使用待辦事項應用'); 
} 
} 
); 

/******************** 
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> 