接触ember并使用它做项目快一年时间了,中间遇到问题、解决问题,现想对其在使用过程中的一些小技巧做个总结。
当你在A Route中需要用到B Route中的数据什么的,这个时候controllerFor就派上用场了。
有的时候,控制器需要依赖其他控制器,这是通过“注入”来实现的。具体使用方法如下:
needs: ['monitorErrorList'],
循环渲染使用上述方式的好处就是:可扩展。见如下例子:
//JS
var developers = [{name: 'Yehuda'},{name: 'Tom'}, {name: 'Paul'}];
//HBS
{{#each developers key="name" as |person|}}
{{person.name}}
{{! `this` is whatever it was outside the #each }}
{{/each}}
//同样适用于数据
//JS
var developerNames = ['Yehuda', 'Tom', 'Paul'];
//HBS
{{#each developerNames key="@index" as |name|}}
{{name}}
{{/each}}
//另外,可以使用index属性
//HBS
<ul>
{{#each people as |person index|}}
<li>Hello, {{person.name}}! You're number {{index}} in line</li>
{{/each}}
</ul>
那么两者差别在哪?
The {{outlet}} helper lets you specify where a child route will render in your template.
The partial helper renders another template without changing the template context.
needs是注入需要的控制器,使用的时候我们最好使用Ember.computed.alias,会增加代码可读性。
这几个非常好理解,也非常好用。
都是用于过滤。
filter用法为函数,filterBy用于字段
function(item, index, array);
用于computed对象中某个字段。
当然你也可以直接computed整个对象,但是它们所消耗的时间差别极大。它可以缩小计算属性依赖参数范围。
//比如某个表是否按照某个字段升序or降序排列
sort: Ember.computed('listColumns.@each.sortOrder', {
...
})
这个会经常用到。编译模板。
控制器中的路由跳转
我想说这个太好用了!
时间格式化要用js很烦有木有!?
数字取小数点后几位,每次用js对数据处理很麻烦有木有!?
需要渲染的数据是几个数据的简单数学计算,需要用js来写,很简单的需求却需要重复的代码有木有!?
……
有了这个registerBoundHelper功能后一切都变了有木有!?
//来个取小数点后两位的例子
Ember.Handlebars.registerBoundHelper('helper-tofixed', function(value, length) {
length = typeof length == 'number' ? length : 2;
return parseFloat(Number(value).toFixed(2));
});
//HBS
//floatNumber 为某个需要截取的有很多小数点的数字啦~
{{helper-tofixed floatNumber}}
组件中,对于具体action实现抛出去。