Ember 工具類的助手

2018-01-06 17:41 更新

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

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

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

1，自定義helper

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





my-helper: {{my-helper}}

程序沒(méi)有報(bào)錯(cuò)，但是什么也沒(méi)有顯示。是的什么也沒(méi)有顯示。沒(méi)有顯示就對(duì)了。因?yàn)槲覀儗?duì)于剛剛創(chuàng)建的app/helpers/my-helper.js沒(méi)有做任何的修改。你可以看這個(gè)文件的代碼。直接返回了params，目前來(lái)說(shuō)這個(gè)參數(shù)是空的。修改這個(gè)文件，直接返回一個(gè)字符串。

//  app/helpers/my-helper.js


import Ember from 'ember';


export function myHelper(params/*, hash*/) {
  return "hello world!";
}


export default Ember.Helper.helper(myHelper);

此時(shí)可以在頁(yè)面上看到直接打印了“hello world!”這個(gè)字符串。這就是一個(gè)最簡(jiǎn)單的自定義helper，不過(guò)這么簡(jiǎn)單helper顯然是沒(méi)啥用的。Ember的作者肯定不會(huì)這么傻的，接著下面介紹helper的參數(shù)。 注意：使用模板的名字跟文件名是一致的。不同單詞使用-分隔，雖然這個(gè)命名規(guī)則不是強(qiáng)制性的但是Ember建議你這么做，Ember會(huì)自動(dòng)根據(jù)helper的名字找到對(duì)應(yīng)的自定義的helper，然后執(zhí)行helper里名字為myHelper（名字是文件名的駝峰式命名）的方法，在這個(gè)方法里你可以實(shí)現(xiàn)你需要的邏輯。這些工作Ember自動(dòng)幫你做了，不需要你編寫(xiě)解析的代碼。

1，helper無(wú)名參數(shù)

上面的代碼定義了一個(gè)最簡(jiǎn)單的helper，不過(guò)沒(méi)啥用，Ember允許在自定義的helper上添加自定義的參數(shù)。

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

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

//  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);


寫(xiě)法二

//  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ù)少情況第二種方式更加簡(jiǎn)便，直接使用！

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

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

result

第一行因?yàn)樵谀０迳蠜](méi)有傳入?yún)?shù)所以是undefined，第二行傳入了參數(shù)，并且直接從helper返回顯示。

2，helper命名參數(shù)

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

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

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

//  app/helpers/my-helper.js


import Ember from 'ember';


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

result

2，時(shí)間格式化

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

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

  1. 創(chuàng)建格式化helper：ember generate helper format-date
  2. 在controller初始化一個(gè)時(shí)間數(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}}`

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

//  app/helpers/format-data.js


import Ember from 'ember';


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

或者你也可以這樣寫(xiě)。

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

為了簡(jiǎn)便，直接就替換字符，修改時(shí)間分隔字 /為-。 然后修改顯示的模板，使用自定義的helper。



{{format-date currentDate}}

此時(shí)頁(yè)面上顯示的時(shí)間是我們熟悉的時(shí)間格式：

result

上面介紹的是簡(jiǎn)答的用法，Ember還允許你傳入時(shí)間的格式（format），以及本地化類型（locale）。

  1. 用命令新建一個(gè)helper：ember generate helper format-date-time
  2. 在controller類里新增兩個(gè)用于測(cè)試的屬性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個(gè)屬性。cDate和currentTime是從上下文獲取值的變量，format和locale是Ember專門提供用于時(shí)間格式化的屬性。

下面看看format-date-time這個(gè)助手怎么獲取頁(yè)面的數(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先，所以第一個(gè)參數(shù)是cDate
    console.log('params[0] = ' + params[0]);  //第一個(gè)參數(shù)是cDate,
    console.log('params[1] = ' + params[1]);  //  第二個(gè)是currentTime
    console.log('hash.format = ' + hash.format);
    console.log('hash.locale = ' + hash.locale);
    console.log('------------------------------------');


    return params;
}


export default Ember.Helper.helper(formatDateTime);

我只是演示怎么獲取頁(yè)面format-date-time助手設(shè)置的值，得到頁(yè)面設(shè)置的值你想干嘛就干嘛…… 最后看看瀏覽器控制臺(tái)的輸出信息。

result

因?yàn)轫?yè)面使用了兩次這個(gè)助手，所以自然也就打印了兩次。

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

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

新建一個(gè)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!"}}

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

到此模板這一章全部講完了！?。〉改隳軓闹械玫揭稽c(diǎn)收獲?。『竺娴奈恼聦㈤_(kāi)始講route，route在Ember.js 入門指南之十三{{link-to}} 助手這一篇已經(jīng)講過(guò)一點(diǎn)，但不是很詳細(xì)。接下來(lái)的一章將會(huì)為你詳細(xì)解釋route。
博文完整代碼放在Github（博文經(jīng)過(guò)多次修改，博文上的代碼與github代碼可能又出入，不過(guò)影響不大?。?，如果你覺(jué)得博文對(duì)你有點(diǎn)用，請(qǐng)?jiān)趃ithub項(xiàng)目上給我點(diǎn)個(gè)star吧。您的肯定對(duì)我來(lái)說(shuō)是最大的動(dòng)力?。?/p>

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)