本篇主要介紹格式轉(zhuǎn)換、自定義helper、自定義helper參數(shù)、狀態(tài)helper、HTML標(biāo)簽轉(zhuǎn)義這幾個方面的東西。

按照文章慣例先準(zhǔn)備好測試所需要的數(shù)據(jù)、文件。仍然是使用Ember CLI命令，這次我們創(chuàng)建的是helper、controller、route（創(chuàng)建route會自動創(chuàng)建template）。

ember generate helper my-helper
ember generate controller tools-helper
ember generate route tools-helper

1，自定義helper

自定義助手非常簡答直接使用Ember CLI命令生成就可以了。當(dāng)然你也可以手動創(chuàng)建，自定義的助手都是放在app/helpers目錄下。Ember會根據(jù)模板上使用的助手自動到這個目錄查找。定義了helper之后你就可以直接在模板上使用。

my-helper: {{my-helper}}

程序沒有報錯，但是什么也沒有顯示。是的什么也沒有顯示。沒有顯示就對了。因為我們對于剛剛創(chuàng)建的app/helpers/my-helper.js沒有做任何的修改。你可以看這個文件的代碼。直接返回了params，目前來說這個參數(shù)是空的。修改這個文件，直接返回一個字符串。

//  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的參數(shù)。 注意：使用模板的名字跟文件名是一致的。不同單詞使用-分隔，雖然這個命名規(guī)則不是強制性的但是Ember建議你這么做，Ember會自動根據(jù)helper的名字找到對應(yīng)的自定義的helper，然后執(zhí)行helper里名字為myHelper（名字是文件名的駝峰式命名）的方法，在這個方法里你可以實現(xiàn)你需要的邏輯。這些工作Ember自動幫你做了，不需要你編寫解析的代碼。

1，helper無名參數(shù)

上面的代碼定義了一個最簡單的helper，不過沒啥用，Ember允許在自定義的helper上添加自定義的參數(shù)。

my-helper-param: {{my-helper 'chen' 'ubuntuvim'}}

在這個自定義的helper中增加了兩個參數(shù)，既然有了參數(shù)那么又有什么用呢？當(dāng)然是有用的，你可以在自定義的helper中獲取參數(shù)，獲取模板的參數(shù)有兩種方式。
寫法一

//  app/helpers/my-helper.js


import Ember from 'ember';


export function myHelper(params/*, hash*/) {
    // 獲取模板上的參數(shù)
    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);

參數(shù)很多的情況使用第一種方式用循環(huán)獲取參數(shù)比較方便，參數(shù)少情況第二種方式更加簡便，直接使用！

注意：參數(shù)的順序與模板傳入的順序一致。

頁面刷新之后可以在頁面或者瀏覽器控制臺看到在helper上設(shè)置的參數(shù)值了吧！！如果你的程序沒有錯誤在瀏覽器上你也會得到下圖的結(jié)果：

第一行因為在模板上沒有傳入?yún)?shù)所以是undefined，第二行傳入了參數(shù)，并且直接從helper返回顯示。

2，helper命名參數(shù)

上一點演示了在模板中傳遞無名的參數(shù)，這一小節(jié)講為你介紹有名字的參數(shù)。

my-helper-named-param: {{my-helper firstName='chen' lastName='ubuntuvim'}}

相比于第一種使用方式給每個參數(shù)增加了參數(shù)名。那么helper處理類有要怎么去獲取這些參數(shù)呢？

//  app/helpers/my-helper.js


import Ember from 'ember';


// 對于命名參數(shù)使用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);

獲取命名參數(shù)使用namedArgs，其實你也可以按照前面的方法使用params獲取參數(shù)值。你在第一行打印語句上打上斷點，是瀏覽器進入debug模式，但不執(zhí)行，你會發(fā)現(xiàn)params一開始是有值namedArgs沒有值，但是執(zhí)行到最后正好相反，params的值被置空了，namedArgs卻有了模板設(shè)置的值，你可以猜想下，Ember可能是把params的值賦值到namedArgs上了，不同之處是namedArgs是以對象屬性的方式取值并且不用關(guān)心參數(shù)的順序問題，params是以數(shù)組的方式取值需要關(guān)心參數(shù)的順序。

2，時間格式化

做開發(fā)的都應(yīng)該遇到過數(shù)字或者時間格式問題，特別是時間格式問題應(yīng)該是最普遍遇到的。不同的項目時間格式往往不同，有yyyy-DD-mm類型的有yyyyMMdd類型以及其他類型。

同樣的Ember模板也給我們提供了類似的解決辦法，那就是自定義格式化方法。通過自定義helper實現(xiàn)數(shù)據(jù)的格式化。

1. 創(chuàng)建格式化helper：ember generate helper format-date
2. 在controller初始化一個時間數(shù)據(jù)。

//  app/controllers/tools-helper.js


import Ember from 'ember';


export default Ember.Controller.extend({
    currentDate: new Date()
});

默認(rèn)情況下顯示數(shù)據(jù)currentDate。

{{ currentDate}}`

此時顯示的默認(rèn)的數(shù)據(jù)格式。 運行http://localhost:4200/tools-helper，可以在頁面看到：Mon Sep 21 2015 23:46:03 GMT+0800 (CST)這種格式的時間。顯然不太合法我們的習(xí)慣，看著都覺得不舒服。那下面使用自定義的helper格式化日期格式。

//  app/helpers/format-data.js


import Ember from 'ember';


/**
 * 注意：方法名字是文件名去掉中劃線變大寫，駝峰式寫法
 * 或者你也可以直接作為helper的內(nèi)部函數(shù)
 * @param  {[type]} params 從助手{{format-data}}傳遞過來的參數(shù)
 */
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。

{{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'
});

<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這個助手怎么獲取頁面的數(shù)據(jù)。

// app/helpers/format-date-time.js


import Ember from 'ember';


export function formatDateTime(params, hash) {
    //  參數(shù)的順序跟模板{{format-date-time currentDate cDate currentTime}}上使用順序一致，
    //  cDate比currentTime先，所以第一個參數(shù)是cDate
    console.log('params[0] = ' + params[0]);  //第一個參數(shù)是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助手設(shè)置的值，得到頁面設(shè)置的值你想干嘛就干嘛…… 最后看看瀏覽器控制臺的輸出信息。

因為頁面使用了兩次這個助手，所以自然也就打印了兩次。

3，轉(zhuǎn)義HTML標(biāo)簽

官方的解釋是：為了保護你的應(yīng)用免受跨點腳本攻擊（XSS），Ember會自動把helper返回值中的HTML標(biāo)簽轉(zhuǎn)義。

新建一個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);

escape-helper: {{escape-helper "helloworld!"}}

此時頁面上會直接顯示“helloworld!”而不是“helloworld”被加粗了！如果你確定你返回的字符串是安全的你可用使用htmlSafe方法，這個方法不會把HTML代碼轉(zhuǎn)義，HTML代碼仍然能起作用，那么頁面顯示的將是加粗的“helloworld！”。

到此模板這一章全部講完了?。?！但愿你能從中得到一點收獲??！后面的文章將開始講route，route在Ember.js 入門指南之十三{{link-to}} 助手這一篇已經(jīng)講過一點，但不是很詳細(xì)。接下來的一章將會為你詳細(xì)解釋route。
博文完整代碼放在Github（博文經(jīng)過多次修改，博文上的代碼與github代碼可能又出入，不過影響不大?。?，如果你覺得博文對你有點用，請在github項目上給我點個star吧。您的肯定對我來說是最大的動力??！