Ember.js 入門指南——工具類的助手
本篇主要介紹格式轉換、自定義helper、自定義helper引數、狀態helper、HTML標籤轉義這幾個方面的東西。
按照文章慣例先準備好測試所需要的資料、檔案。仍然是使用Ember CLI命令，這次我們建立的是helper、controller、route（建立route會自動建立template）。
ember generate helper my-helper
ember generate controller tools-helper
ember generate route tools-helper
1，自定義helper
自定義助手非常簡答直接使用
<!-- //app/templates/tools-helper.hbs -->
my-helper: {{my-helper}}
程式沒有報錯，但是什麼也沒有顯示。是的什麼也沒有顯示。沒有顯示就對了。因為我們對於剛剛建立的app/helpers/my-helper.js沒有做任何的修改。你可以看這個檔案的程式碼。直接返回了params，目前來說這個引數是空的。修改這個檔案，直接返回一個字串。
// app/helpers/my-helper.js
import Ember from 'ember';
export function myHelper(params/*, hash*/) {
return "hello world!";
}
export default Ember.Helper.helper(myHelper);
此時可以在頁面上看到直接列印了“hello world!”這個字串。這就是一個最簡單的自定義helper，不過這麼簡單helper顯然是沒啥用的。Ember的作者肯定不會這麼傻的，接著下面介紹helper的引數。
注意：使用模板的名字跟檔名是一致的。不同
1，helper無名引數
上面的程式碼定義了一個最簡單的helper，不過沒啥用，Ember允許在自定義的helper上新增自定義的引數。
<!-- //app/templates/tools-helper.hbs -->
my-helper-param: {{my-helper 'chen' 'ubuntuvim'}}
在這個自定義的helper中增加了兩個引數，既然有了引數那麼又有什麼用呢？當然是有用的，你可以在自定義的helper中獲取引數，獲取模板的引數有兩種方式。
寫法一
// app/helpers/my-helper.js
import Ember from 'ember';
export function myHelper(params/*, hash*/) {
// 獲取模板上的引數
var p1 = params[0];
var p2 = params[1];
console.log('p1 = ' + p1 + ", p2 = " + p2);
return p1 + " " + p2;
}
export default Ember.Helper.helper(myHelper);
寫法二
// app/helpers/my-helper.js
import Ember from 'ember';
export function myHelper([arg1, arg2]) {
console.log('p1 = ' + arg1 + ", p2 = " + arg2);
return arg1 + " " + arg2;
}
export default Ember.Helper.helper(myHelper);
引數很多的情況使用第一種方式用迴圈獲取引數比較方便，引數少情況第二種方式更加簡便，直接使用！
注意：引數的順序與模板傳入的順序一致。
頁面重新整理之後可以在頁面或者瀏覽器控制檯看到在helper上設定的引數值了吧！！如果你的程式沒有錯誤在瀏覽器上你也會得到下圖的結果：
第一行因為在模板上沒有傳入引數所以是undefined，第二行傳入了引數，並且直接從helper返回顯示。
2，helper命名引數
上一點helper無名引數演示了在模板中傳遞無名的引數，這一小節講為你介紹有名字的引數。
<!-- //app/templates/tools-helper.hbs -->
my-helper-named-param: {{my-helper firstName='chen' lastName='ubuntuvim'}}
相比於第一種使用方式給每個引數增加了引數名。那麼helper處理類有要怎麼去獲取這些引數呢？
// app/helpers/my-helper.js
import Ember from 'ember';
// 對於命名引數使用namedArgs獲取
export function myHelper(params, namedArgs) {
console.log('namedArgs = ' + namedArgs);
console.log('params = ' + params);
console.log('=========================');
return namedArgs.firstName + ", " + namedArgs.lastName;
}
export default Ember.Helper.helper(myHelper);
獲取命名引數使用namedArgs，其實你也可以按照前面的方法使用param獲取引數值。你在第一行列印語句上打上斷點，是瀏覽器進入debug模式，但不執行，你會發現params一開始是有值namedArgs沒有值，但是執行到最後正好相反，params的值被置空了，namedArgs卻有了模板設定的值，你可以猜想下，Ember可能是把params的值賦值到namedArgs上了，不同之處是namedArgs是以物件屬性的方式取值並且不用關心引數的順序問題，params是以陣列的方式取值需要關心引數的順序。
2，時間格式化
做開發的都應該遇到過數字或者時間格式問題，特別是時間格式問題應該是最普遍遇到的。不同的專案時間格式往往不同，有“yyyy-DD-mm”型別的有“yyyyMMdd”型別以及其他型別。
同樣的Ember模板也給我們提供了類似的解決辦法，那就是自定義格式化方法。通過自定義helper實現資料的格式化。
1，建立格式化helper：ember generate helper format-date
2，在controller初始化一個時間資料。
// app/controllers/tools-helper.js
import Ember from 'ember';
export default Ember.Controller.extend({
currentDate: new Date()
});
預設情況下顯示資料currentDate。
<!-- //app/templates/tools-helper.hbs -->
{{ currentDate}}
此時顯示的預設的資料格式。執行http://localhost:4200/tools-helper，可以在頁面看到：Mon Sep 21 2015 23:46:03 GMT+0800 (CST) 這種格式的時間。顯然不太合法我們的習慣，看著都覺得不舒服。那下面使用自定義的helper格式化日期格式。
// app/helpers/format-data.js
import Ember from 'ember';
/**
* 注意：方法名字是檔名去掉中劃線變大寫，駝峰式寫法
* 或者你也可以直接作為helper的內部函式
* @param {[type]} params 從助手{{format-data}}傳遞過來的引數
*/
export function formatDate(params/*, hash*/) {
console.log('params = ' + params);
var d = Date.parse(params);
var dd = new Date(parseInt(d)).toLocaleString().replace(/:\d{1,2}$/,' '); // 2015/9/21 下午11:21
var v = dd.replace("/", "-").replace("/", "-").substr(0, 9);
return v;
}
export default Ember.Helper.helper(formatDate);
或者你也可以這樣寫。
export default Ember.Helper.helper(function formatDate(params/*, hash*/) {
var d = Date.parse(params);
var dd = new Date(parseInt(d)).toLocaleString().replace(/:\d{1,2}$/,' '); // 2015/9/21 下午11:21
var v = dd.replace("/", "-").replace("/", "-").substr(0, 9);
return v;
});
為了簡便，直接就替換字元，修改時間分隔字 “/”為“-”。
然後修改顯示的模板，使用自定義的helper。
<!-- //app/templates/tools-helper.hbs -->
{{format-date currentDate}}
此時頁面上顯示的時間是我們熟悉的時間格式：
上面介紹的是簡答的用法，Ember還允許你傳入時間的格式（format），以及本地化型別（locale）。
1，用命令新建一個helper：ember generate helper format-date-time
2，在controller類裡新增兩個用於測試的屬性cDate和currentTime。
// app/controllers/tools-helper.js
import Ember from 'ember';
export default Ember.Controller.extend({
currentDate: new Date(),
cDate: '2015-09-22',
currentTime: '00:22:32'
});
<!-- //app/templates/tools-helper.hbs -->
<br><br><br>
format-date-time: {{format-date-time currentDate cDate currentTime format="yyyy-MM-dd h:mm:ss"}}
<br><br><br>
format-date-time-local: {{format-date-time currentDate cDate currentTime format="yyyy-MM-dd h:mm:ss" locale="en"}}
在助手format-date-time上一共有4個屬性。cDate和currentTime是從上下文獲取值的變數，format和locale是Ember專門提供用於時間格式化的屬性。
下面看看format-date-time這個助手怎麼獲取頁面的資料。
// app/helpers/format-date-time.js
import Ember from 'ember';
export function formatDateTime(params, hash) {
// 引數的順序跟模板{{format-date-time currentDate cDate currentTime}}上使用順序一致，
// cDate比currentTime先，所以第一個引數是cDate
console.log('params[0] = ' + params[0]); //第一個引數是cDate,
console.log('params[1] = ' + params[1]); // 第二個是currentTime
console.log('hash.format = ' + hash.format);
console.log('hash.locale = ' + hash.locale);
console.log('------------------------------------');
return params;
}
export default Ember.Helper.helper(formatDateTime);
我只是演示怎麼獲取頁面format-date-time助手設定的值，得到頁面設定的值你想幹嘛就幹嘛……
最後看看瀏覽器控制檯的輸出資訊。
因為頁面使用了兩次這個助手，所以自然也就列印了兩次。
3，轉義HTML標籤
官方的解釋是：為了保護你的應用免受跨點指令碼攻擊（XSS），Ember會自動把helper返回值中的HTML標籤轉義。
新建一個helper：ember generate helper escape-helper
// app/helpers/escape-helper.js
import Ember from 'ember';
export function escapeHelper(params/*, hash*/) {
// return Ember.String.htmlSafe(`<b>${params}</b>`);
return `<b>${params}</b>`;
}
export default Ember.Helper.helper(escapeHelper);
<!-- //app/templates/tools-helper.hbs -->
escape-helper: {{escape-helper "helloworld!"}}
此時頁面上會直接顯示“<b>helloworld!</b>”而不是helloworld被加粗了！如果你確定你返回的字串是安全的你可用使用htmlSafe方法，這個方法不會把HTML程式碼轉義，HTML程式碼仍然能起作用，那麼頁面顯示的將是加粗的“helloworld！”。
到此模板這一章全部講完了！！！但願你能從中得到一點收穫！！後面的文章將開始講route，route在link-to助手這一篇已經講過一點，但不是很詳細。接下來的一章將會為你詳細解釋route。