2 min read

Ember.js 计算的属性

Note:本文基于 Ember.js 1.4.0

在 Ember.js 里,模型对象的属性多数很简洁,可以把它理解为数据库里的字段。比如一个定义 person 对象的类:

App.Person = Ember.Object.extend({
  id: null,
  firstName: null,
  lastName: null,
  age: null,
  gender: null
});

在 handlebars 模板里使用:

我的名字叫{{firstName}}{{lastName}},{{gender}}性,今年{{age}}岁。

假定我还想根据 age 的值来划分「幼年」、「少年」、「青年」、「壮年」、「老年」又如何?

计算的属性

Ember.js 提供的计算的属性可以很方便地解决这种问题,只需要给 Person 类增加一个属性 – 区别是,这个属性不是静态的,而是动态的一个函数,函数中返回值:

App.Person = Ember.Object.extend({
  id: null,
  firstName: null,
  lastName: null,
  age: null,
  gender: null,
  ageClass: function() { // <- 这就是我们要定义的计算属性,在函数体中可以做逻辑判断
    var age = this.get('age');
    switch (true) {
      case age > 0 && age < 6:
        return '幼年';
        break;
      case age >= 6 && age < 18:
        return '少年';
        break;
      case age >= 18 && age < 30:
        return '青年';
        break;
      case age >= 30 && age < 60:
        return '壮年';
        break;
      case age >= 60:
        return '老年';
        break;
  }.property('age') // <- 这个是计算的属性与普通属性的一个区别
});

注意函数后紧跟着的 property,它声明该计算的属性依赖其他属性。age 值如果有变化,它的值会自动更新。

创建对象实例时,我们不需要给计算的属性传参数,

App.Person.create({
  id: 1,
  firstName: '三',
  lastName: '陈',
  age: 18,
  gender: '男'
});

Ember.js 会自动生成 ageClass,可直接在前端模板上使用:

我的名字叫{{firstName}}{{lastName}},{{gender}}性,今年{{age}}岁,据称还属于{{ageClass}}。

渲染后的内容为:

我的名字叫三陈,男性,今年18岁,据称还属于青年。

宏指令

除开上面的用法,Ember.js 还提供宏指令,用于一些简单的真假判断,以及复杂的过滤(filter)、映射(map)等。

仍以上面的模型为例子,比如我要在前端显示所有年纪小于25的人,第一感觉模板代码是这样写的:

{{#if age < 25}}
...
{{/if}}

但这是错的,Handlebars.js 不允许在 if 里做逻辑判断。我们可以考虑增加一个计算的属性,但这次是由计算的属性宏指令来构成函数体的:

App.Person = Ember.Object.extend({
  id: null,
  firstName: null,
  lastName: null,
  age: null,
  gender: null,
  isYoung: Ember.computed.lt('age', 25) // <- 如果 age 小于25则 isYoung 值为 true
});

然后模板这样写:

{{#if isYoung}}
...
{{/if}}

在我们使用宏指令时,并不需要添加 property() 这样的方法,代码会更干净,更清楚。

Handlebars 助手

类似的问题,除了以上两种方法,我们还可以用 Handlebars 助手

Ember.Handlebars.helper('isYoung', function(age) { // 定义模板助手
  return age < 25 ? true : false;
});

然后模板文件里这样写:

{{#if isYoung age}}
...
{{/if}}

Ember.js 不用 Ember Data 如何创建模型

Computed Property Macros – Evil Trout’s Blog

请查看 api 中 computed. 开头的方法

Ember.js – Templates: Writing Helpers

报告问题 修订

如果你有自建 https 代理的需求,欢迎尝试 Phantom,一键搭建,方便快捷。查看 demo