探索Emberjs製作一個簡單的Todo應用程式_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

探索Emberjs製作一個簡單的Todo應用程式_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:48 PM

目標
使用Emberjs製作一個簡單的Todo應用，實現這樣一個效果：透過在文本框輸入文本，建立一條代辦事項，代辦事項可以選擇優先級，完成的事項可以刪除。

準備
完成這個應用，需要做點準備：
1、建立一個html頁面，暫時不管樣式；
2、腳本：emberjs，handlebars、 jQuery。這三個腳本可以從網路上取得，我們將把他們加入到head標籤裡去。

製作
建立頁面，加入腳本，就可以開始製作應用程式。 html代碼如下：

複製程式碼程式碼如下:

 
 代碼如下:

Ember--第一個應用

依照ember的要求，需要用Ember.Application.create()先建立應用實例，這也作為應用的命名空間。這個create方法可以傳遞一個物件屬性ready，屬性值是一個函數，在應用準備就緒時呼叫。 Ember也可以使用縮寫Em來取代。

在Ember裡有一個Em.Logger對象，相當於window.console，可以用來除錯。我們可以在這個ready加入一個訊息，顯示在控制台中。

現在，在head標籤裡再增加一個script標籤來寫應用的腳本，實例化一個ember應用，順便把MVC各模組的區域也加上。腳本程式碼如下：複製程式碼

 程式碼如下:

 
** >*/ 

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

/******************** 
申請 
*********************/ 



/******************** 
模型 
*********************/ 


/******************** 
查看 
*********************/ 

然後，我們需要一個輸入框來輸入代辦事項，需要建立一個ember文字方塊視圖。 ember視圖可以用Ember.View類別來建立（使用create方法）或擴充（使用extend方法）一個新的視圖類別。不過對於文字框視圖，ember提供了更直接的方式－Ember.TextField類，我們可以先使用這個類別來擴充一個自訂的視圖，然後再實例化加入到頁面上。我們將這個文字方塊視圖類別命名為AddItemView 。

在腳本程式碼裡的view區域加入上方文字方塊檢視程式碼：

複製程式碼

複製程式碼

 程式碼如下:

App.AddItemView = Ember.TextField.extend({

});

可以給它加個提示語，html5支援placeholder，可以拿來用。還需要在按下回車時將內容新增至代表事項列表，這裡需要使用一個屬性：insertNewline，按下回車時會呼叫對應的函數。加入後的程式碼如下：

複製程式碼

 程式碼如下:

程式碼如下: App.Item = Ember.TextField.extend({ placeholder:'輸入待辦事項', insertNewline:function(){} });

由於現在還沒確定具體添加方法，函數體暫時先不寫。

使用者在按下回車時增加一條代辦事項，需要一個清單來顯示，在ember中可以建立CollectionView來存放清單項目視圖，對於CollectionView，預設會有一個content屬性來存放清單項目對象，其屬性值是數組。為了讓其列表顯示為ul列表，需要定義CollectionView的標籤名稱（tagName）為「ul」。我們為這個清單檢視命名為ListView，並增加到文字方塊檢視的下方。最後程式碼如下：

複製程式碼程式碼如下:

 
App.ListView = Em>App.ListView .CollectionView.extend({ 
content:[], 
tagName:'ul' 
}); 

現在如果開啟頁面，是沒顯示任何內容的，因為視圖還沒被渲染，要將視圖顯示出來，需要handlebar模板的支援。

現在來修改html頁面的body區塊，加入剛建立的兩個視圖，看看效果。

新增handlebar範本的方法是，也可以指定範本名稱，在data-template-name屬性裡定義，待會我們新增清單項目時會需要用到。

在模板裡需要透過視圖助手（helper）來新增視圖，語法也很簡單，用兩個花括號對包裹，裡面透過模板關鍵字來指定要顯示的視圖，如：{{view App.AddItemView}}。其他模板助手可以在handlebar網站上找到：http://handlebarsjs.com/。

現在先把文字方塊跟清單檢視加到頁面上，修改後的body程式碼如下：

複製程式碼

程式碼如下:

{{view App.ListView}}

現在重新整理頁面，會顯示一句「請輸入代辦事項」跟一個文字框，清單由於沒有內容，不會顯示。

這時候我們可以在content裡加入點內容，例如content:['a','b','c']，然後重新整理頁面，你會發現清單區域只有三個小黑點（如果你沒重置清單樣式的話）。因為你在content中新增了三項，但清單項目還沒有指定一個顯示的模板，所以，顯示為空。為了讓你看到效果，我們來為列表項目定義個顯示的模板吧。這裡需要處理兩個地方，第一是在頁面加指定名稱的模板，第二是在清單檢視裡定義清單項目的屬性。

定義清單項目，需要用到itemViewClass，它會將每個content項傳遞進去並用指定的模板顯示。先來修改列表視圖ListView 吧，給它增加itemViewClass屬性，這也是一種視圖，所以需要用Ember.View來創建，在創建時同時指定用來顯示的模板名稱為itemTemplate，這個名稱同時將為出現在html的handlebar模板名稱裡。修改後的程式碼如下：

複製程式碼

 程式碼如下:content:['a','b','c'], 
tagName:'ul', 
itemViewClass: Ember.View.extend({ 
templateName:'itemTemplate', 
}) 
}); 

還差一步就完成了，現在來修改html，我們需要在body裡再新建一個handlebar模板，會用到上面給的模板名稱，程式碼如下：

複製程式碼

程式碼如下:接著同樣是新增模板助手，要把每一個content項傳遞給助手，會用到view.content。新增以下程式碼：

複製程式碼

程式碼如下:

完成後，刷新頁面，現在終於把content裡的內容顯示出來了，而且，模板會自動加上li標籤。

繼續完善我們的應用。我們總不能把content的內容寫成固定的吧，這樣用戶還要怎麼加。所以，現在考慮把使用者要新增的項目存到一個陣列裡，然後content自己去拿這個陣列的內容。同時，ember框架支援雙向綁定，當陣列內容修改時，透過綁定的content也會同時改變，反之亦然。現在，就建立一個ember數組，然後跟content綁定吧。

ember數組可以透過ArrayController類別來創建，它會把你傳進去的普通javascript轉變為一個新的ember數組對象，我們把用來管理專案的數組命名為todoStore，放到html頁面的controller區域，建立的程式碼如下：

複製程式碼程式碼如下:

 
App .todoStore = Ember.ArrayController.create({ 
content:[] 
}); 

現在可以把ListView 裡的content陣列放到這個陣列裡，然後綁定ListView 裡的content到todoStore 上，這兩個物件將修改為如下所示：

複製程式碼

 程式碼如下:

 
App.ListView = Ember.CollectionView.extend({ 
contentBinding:'App.todoStore', 
tagName:'ul', 
itemClass: Ember.View.extend({ 
templateName:'itemTemplate' 
}) 
}); 

/******************** 
控制 
*****************/ 

App.todoStore = Ember.ArrayController .create({
content:['a','b','c']
});

Binding是個後綴，表示綁定，屬性值是綁定的對象，預設取該對象的content屬性。修改完成後重新整理頁面，如果你看到的頁面跟修改之前的一樣，表示修改成功了。接著，是時候去除content裡的值了，我們需要的資料將由使用者在文字方塊裡輸入。

考慮現在的互動過程，使用者在文字方塊輸入內容，按下回車，程式取得到該事件，呼叫一個方法建立一個新對象，再把這個新物件送給todoStore ，由於綁定作用，清單會自動增加一項。

是時候改造下文字框視圖了，還記得insertNewline嗎？我們可以在這裡建立新的專案。我們會用到三個方法：set()設定屬性值、get()取得屬性值、pushObject()新增數據，修改AddItemView 後的程式碼如下：

複製程式碼

 程式碼如下:

 
App.AddItemView = Ember.TextField.extend({ 
placeholder:'輸入待辦事項', 
insertNewline:function(){ 
var item = this.get('value'); 
App.todoStore.pushObject(item); 

this.set('value','');
}
});

現在刷新頁面，然後輸入內容，按回車，列表會添加輸入的內容，說明修改成功，如果你沒把todoStore的content屬性裡的內容清空的話，現在會有4個清單項目了。

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

要增加下拉列表，可以使用另一個方便的視圖：Ember.Select。我們可以直接在模板裡直接建立一個，同樣透過綁定，把下拉清單視圖的content綁定到另一個ember物件上，然後設定預設選取的優先權。優先權也需要用到綁定，這樣在頁面上選擇的時候，才會同時修改對應的ember物件裡的內容。先來建立這個ember對象，自訂該物件的selected屬性表示選取的值，其他名稱也行，這段程式碼會加到todoStore物件的下面，命名為selectController，程式碼如下：

複製程式碼

 程式碼如下:

App.selectController = Ember.Object.create({

selected:'低',
content:['高','中','低']
});

然後增加一個模板助手，並綁定selectController 裡對應的屬性，選取項目的綁定需要用到selectionBinding，順便給個文字提示，然後加入到文字方塊模板的下面，修改後的程式碼如下：

複製程式碼程式碼如下:

現在刷新頁面就會出現下拉清單了。

要想讓列表項目也出現這個優先級，還得花點功夫啊。是時候用model了，我們來創建一個model類，當按下回車時，從這個類創建一個實例，再把實例扔到todoStore裡就可以了，另外，模板也要跟著修改，文本框視圖的創建方法也得改。這次改動比較多了點。另外，也會用到一個計算屬性的功能，當依賴的屬性改變時，自動更新。把這個model命名為TodoModel，放到model區域，建立程式碼如下：

複製程式碼程式碼

複製程式碼

 程式碼

 
/******************** 
模型 
*********************/ 

App.TodoModel = Em.Object.extend({ 
status:'', 
value:'', status:'', 

value:'',
title:function(){
return '[' this.get('status') ']' this.get('value');
}.property('status','value')
});

status表示選擇的優先權，value表示文字方塊裡的值，title表示清單項目要顯示的內容，這些屬性名稱都是自訂的。其中title不需要提供，因為它設定為計算屬性，依賴status跟value屬性，自動計算獲取，property()方法就是ember函數轉變為計算屬性的方法，後面的參數表示title依賴的屬性，當status或value變化時，就會自動給予。接著修改AddItemView的insertNewline屬性，需要取到兩個數據，一個是文字方塊裡的內容，一個是下拉清單裡選取的項目。文字方塊的值已經知道怎麼取得了，下拉清單的值呢？別忘了我們已經將選取項目綁定到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',''); } });

現在可以透過TodoModel類別來實例化一個待辦事項並新增到todoStore裡了，最後是修改項目列表的模板itemTemplate來顯示，在模板裡需要取到目前項目的title值來顯示，代碼如下：

複製程式碼

程式碼如下:

現在新增的新待辦事項會顯示優先順序了。

好了，最後一個功能，刪除。跟新增pushObject相反，刪除用到的是removeObject。因為它是顯示在每個列表項目裡的，所以，需要修改itemViewClass跟itemTemplate模板，我們在itemViewClass裡添加一個方法，當用戶點擊時調用，把該方法命名為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助手，第一個參數是方法名，target屬性用來指定對象，點擊時呼叫指定對像下的方法。修改後的itemTemplate程式碼如下：

複製程式碼程式碼如下:

現在新增加的項目都會有個叉在右邊，點擊時就把當前項目刪除。

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

複製代碼代碼如下:

 
full code 
 > 
 
Ember--第一個應用 
 
<script> <br><br>/******************** <BR>申請 <BR>*********************/ <br><br>window.App = Ember.Application.create( <BR>{ <BR>ready:function(){ <BR>Em.Logger.info('歡迎使用待辦事項應用程式'); <BR>} <BR>} <BR>); <br><br>/******************** <BR>模型 <BR>*********************/ <br><br>App.TodoModel = Em.Object.extend( { <BR>status:'', <BR>value:'', <BR>title:function(){ <BR>return '[' this.get('status') ']' this.get('value '); <BR>}.property('status','value') <BR>}); <br><br>/******************** <BR>查看 <BR>*********************/ <BR>App.AddItemView = Ember.TextField.extend ({ <BR>placeholder:'輸入待辦事項', <BR>elementId:'add', <BR>insertNewline:function(){ <BR>var item = App.TodoModel.create({ <BR>status: App.selectController.get('selected'), <BR>value:this.get('value') <BR>}); <BR>App.todoStore.pushObject(item); <BR>this.set(' value',''); <BR>} <BR>}); <br><br>App.ListView = Ember.CollectionView.extend({ <BR>contentBinding:'App.todoStore', <BR>tagName: 'ul', <BR>itemViewClass: Ember.View.extend({ <BR>templateName:'itemTemplate', <BR>removeItem:function(){this.getPath( 'contentView.content' ).removeObject(this.get ( 'content' ));}, <BR>mouseEnter:function(){this.set('hover',true);}, <BR>mouseLeave:function(){this.set('hover',false) ;} <BR>}) <BR>}); <br><br><br><br>/******************** <BR>控制 <BR>*****************/ <BR>App.todoStore = Ember.ArrayController.create({ <BR> content:[] <BR>}); <br><br>App.selectController = Ember.Object.create({ <BR>selected:'低', <BR>content:['高','中', '低'] <BR>}); <br><br></script>