您的位置:首页 > 其它

关于Ember的一些小技巧总结

2017-02-21 20:23 190 查看
接触ember并使用它做项目快一年时间了,中间遇到问题、解决问题,现想对其在使用过程中的一些小技巧做个总结。

controllerFor

当你在A Route中需要用到B Route中的数据什么的,这个时候controllerFor就派上用场了。

needs

有的时候,控制器需要依赖其他控制器,这是通过“注入”来实现的。具体使用方法如下:

needs: ['monitorErrorList'],


使用each as代替each in

循环渲染使用上述方式的好处就是:可扩展。见如下例子:

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


outlet与partial

outlet 可以动态加载模版

partial 也是渲染所需模板

那么两者差别在哪?

outlet是一个资源的子路由的入口,也就是说它对应的资源拥有独立的路由和控制器。

而partial所渲染的资源是没有的,它的渲染不改变上下文环境。

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.

Ember.computed的一些方法

Ember.computed.alias

needs是注入需要的控制器,使用的时候我们最好使用Ember.computed.alias,会增加代码可读性。

Ember.computed.and、Ember.computed.bool、Ember.computed.or、Ember.computed.not

这几个非常好理解,也非常好用。

Ember.computed.filter 、Ember.computed.filterBy

都是用于过滤。

filter用法为函数,filterBy用于字段

function(item, index, array);


@each. 用法

用于computed对象中某个字段。

当然你也可以直接computed整个对象,但是它们所消耗的时间差别极大。它可以缩小计算属性依赖参数范围。

//比如某个表是否按照某个字段升序or降序排列
sort: Ember.computed('listColumns.@each.sortOrder',  {
...
})


Handlebars.compile

这个会经常用到。编译模板。

transitionTo

控制器中的路由跳转

Ember.Handlebars.registerBoundHelper

我想说这个太好用了!

时间格式化要用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}}


sendAction

组件中,对于具体action实现抛出去。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  ember