EmberJS - 计算属性
计算属性将函数声明为属性,Ember.js 会在需要时自动调用计算属性,并将一个或多个属性组合在一个变量中。
下表列出了计算属性的属性 −
S.No. | 属性 &描述 |
---|---|
1 | 链接计算属性
链接计算属性用于与一个或多个预定义的计算属性进行聚合。 |
2 | 动态更新
在调用计算属性时动态更新计算属性。 |
3 | 设置计算属性
帮助使用 setter 和 getter 方法设置计算属性。 |
示例
以下示例将计算属性添加到 Ember.object 并展示如何显示数据 −
import Ember from 'ember'; export default function() { var Car = Ember.Object.extend ({ //以下变量的值将由"create"方法提供 CarName: null, CarModel: null, carDetails: Ember.computed('CarName', 'CarModel', function() { //将值返回给计算属性函数"carDetails" return ' Car Name: ' + this.get('CarName') + '<br>' + ' Car Model: ' + this.get('CarModel'); }) }); var mycar = Car.create ({ //初始化 Car 变量的值 CarName: "Alto", CarModel: "800", }); //显示车辆信息 document.write("<h2>Details of the car: <br></h2>"); document.write(mycar.get('carDetails')); }
现在打开 app.js 文件并在文件顶部添加以下行 −
import computedproperties from './computedproperties';
其中,computedproperties 是指定为"computedproperties.js"并在"app"文件夹下创建的文件的名称。现在,在导出之前,在底部调用继承的"computedproperties"。它执行在 computedproperties.js 文件中创建的 computedproperties 函数 −
computedproperties();
输出
运行 ember 服务器,您将收到以下输出 −
![Ember.js 计算属性](/emberjs/images/emberjs-computed-properties.jpg)