ember.js_Ember.js 计算的属性学习笔记

例子：

 代码如下

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岁，据称属于青年。

类似的问题，除了使用计算的属性外，我们还可以用 Handlebars 助手2，不过我个人更喜欢用计算的属性，因为它们多数跟其他静态属性相关，写在类定义里会更直观

ember.js_Ember.js 计算的属性学习笔记

http://m.bbyears.com/wangyezhizuo/50251.html

推荐访问: