工具类的助手
编辑教程工具类的助手
本篇主要介绍格式转换、自定义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
自定义helper
自定义助手非常简答直接使用Ember CLI命令生成就可以了。当然也可以手动创建,自定义的助手都是放在app/helpers目录下。Ember会根据模板上使用的助手自动到这个目录查找。定义了helper之后就可以直接在模板上使用。
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建议这么做, Ember会自动根据helper的名字找到对应的自定义的helper,然后执行helper里名字为myHelper(名字是文件名的驼峰式命名)的方法,在这个方法里可以实现需要的逻辑。这些工作Ember自动帮做了,不需要编写解析的代码。
helper无名参数
上面的代码定义了一个最简单的helper,不过没啥用,Ember允许在自定义的helper上添加自定义的参数。
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返回显示。
helper命名参数
上一点演示了在模板中传递无名的参数,这一小节讲为介绍有名字的参数。
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,也可以按照前面的方法使用params获取参数值。
在第一行打印语句上打上断点,是浏览器进入debug模式,但不执行,params一开始是有值namedArgs没有值
但执行到最后正好相反,params的值被置空了,namedArgs却有了模板设置的值,
可以猜想下,Ember可能是把params的值赋值到namedArgs上了,不同之处是namedArgs是以对象属性的方式取值并且不用关心参数的顺序问题,params是以数组的方式取值需要关心参数的顺序。
时间格式化
做开发的都应该遇到过数字或者时间格式问题,特别是时间格式问题应该是最普遍遇到的。不同的项目时间格式往往不同,有yyyy-DD-mm类型的有yyyyMMdd类型以及其他类型。
同样的Ember模板也给我们提供了类似的解决办法,那就是自定义格式化方法。通过自定义helper实现数据的格式化。
创建格式化helper:ember generate helper format-date
在controller初始化一个时间数据。
// app/controllers/tools-helper.js
import Ember from 'ember';
export default Ember.Controller.extend({
currentDate: new Date()
});
默认情况下显示数据currentDate。
{{ currentDate}}
此时显示的默认的数据格式。 运行可以在页面看到: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。
{{format-date currentDate}}
上面介绍的是简答的用法,Ember还允许传入时间的格式(format),以及本地化类型(locale)。
- 用命令新建一个helper:ember generate helper format-date-time
- 在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这个助手怎么获取页面的数据。
// 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);
转义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);
escape-helper: {{escape-helper "helloworld!"}}
此时页面上会直接显示“helloworld!”而不是“helloworld”被加粗了!
如果确定返回的字符串是安全的可用使用htmlSafe方法,这个方法不会把HTML代码转义, HTML代码仍然能起作用,那么页面显示的将是加粗的“helloworld!”。
选择支付方式:
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间