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

2024-05-06 14:20:58

字體：大中小

來源：轉載

供稿：網友

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

準備
完成這個應用，需要做點準備：
1、創(chuàng)建一個html頁面，暫時不管樣式；
2、腳本：emberjs，handlebars、jQuery。這三個腳本可以從網上獲得，我們將把他們加入到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ù)，在應用準備就緒時調用。Ember還可以使用縮寫Em來代替。

在Ember中有一個Em.Logger對象，相當于window.console，可以用來調試。我們可以在這個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，可以拿來用。還需要在按下回車時將內容添加到代表事項列表，這里需要用到一個屬性：insertNewline，在按下回車時會調用相應的函數(shù)。加入后的代碼如下：

上一篇：JS的replace方法詳細介紹

下一篇：php對mongodb的擴展(小試牛刀)