关于Ember的一些小技巧总结

督飞鸣
2023-12-01

接触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实现抛出去。

 类似资料: