本节书摘来自异步社区《Ember.js实战》一书中的第2章，第2.3节，作者：【挪】Joachim Haagen Skeie（乔基姆•哈根•斯基）著，更多章节内容可以访问云栖社区“异步社区”公众号查看
2.3 计算属性
计算属性是一个函数，其返回一个从其他变量或表达式（也可以是其他计算属性）获取的值。计算属性与普通JavaScript函数之间的区别在于，Ember.js将计算属性看作其真正的属性。因此，就可以在计算属性上调用get()和set()等`方法，以及绑定/观察它们（观察者概念在本章稍后介绍）。通常，在模型对象中定义计算属性，并在控制器和视图中使用它。
目前的记事本应用程序还没用上计算属性，但如果你想增强应用程序功能，在界面左边的事项列表中显示每条事项前20个字符的内容，那么，就请忘掉使用jQuery选择器以及在视图某处注入/替代信息的方式，现在可以通过Ember.js的计算属性来实现。
接下来在Notes.Note类中创建一个名为introduction的计算属性，用来返回每条事项前20个字符的内容。修改Notes.Note模型类，如代码清单2-3所示。
代码清单2-3 创建introduction计算属性
Ember.js在这里实现了大量功能。首先，Ember.js能够智能感知对计算属性返回值进行计算的时机和频率。只有用到计算属性，才会计算其返回值。这对性能而言非常有利，因为应用程序不用浪费时间计算那些有可能从不在界面上显示的大量属性。
了解如何将一个函数定义为计算属性的方式，将有助于了解对计算属性进行计算的第二层意思。property('value')意思是“无论this对象的value属性何时改变，都对计算属性的返回值进行重新计算”。因此，当在文本区域字段输入内容到事项的value属性，可以看到界面立即发生了更新，以反映这种变化。
到目前，尚未将introduction计算属性添加到模板中去，我们将用它来预览每条事项。代码清单2-4扩展了notes模板，以在事项列表显示value属性前20个字符的内容。
代码清单2-4 在notes模板中添加introduction计算属性
我们只在模板中添加了一行代码。如果当前Note模型的introduction属性非null，则其内容长度大于0，那么就打印新行，之后输出introduction属`性自身内容。修改后的记事本应用程序如图2-7所示。
前面提到可以将计算属性当作setter来用。但如何设置一个从其他关联属性获取的值呢？在代码清单2-5中，一个名为Notes.Duration的对象拥有一个durationSeconds属性。尽管对后台服务而言以秒为单位存储时长是有意义的事情，但对于用户来讲，看到秒数就显得很不直观。因此，我们应该将秒数转换成以冒号隔开的“时:分:秒”格式的字符串。
代码清单2-5 将计算属性当作setter
要注意的第一件事就是计算属性函数现在包含了两个参数：key和value。你可以通过检测这两个参数来判断函数是作为getter还是setter来调用。根据请求，对于value参数，null可能有意义也可能无意义，因此不能用是否为null来判断。你希望输入有效格式时才更改durationSeconds属性，因此，先将输入值各部分分解到一个数组中，然后验证输入值。如果输入合法，开始将HH:MM:SS格式字符串转换成秒数，之后用新值更新对象durationSeconds属性。`
计算属性函数的第二部分是getter，如你预料的，与setter部分相反。其首先获取durationSeconds属性值，之后生成durationString并`返回。
你大概已经想到了，通过简单地绑定到文本区域字段元素，以这种方式使用计算属性来填充输入字段是相当简单的。Ember.js只需关注将秒数自动格式化为易读的时长，而反过来当用户更改文本区域字段中的时长时也一样。
前面还提及计算属性可以通过观察者来计算它的值，但你还未能一睹Ember.js观察者模式的庐山真面目，接下来就来了解它。
