在视图中显示 emberjs 计算属性答案

【问题标题】：Show emberjs computed property in view在视图中显示 emberjs 计算属性
【发布时间】：2013-12-11 02:47:07
【问题描述】：

我在视图中显示计算属性时遇到问题

我学习 EmberJS 的时间还不到一周。不同的教程有不同的编码风格，很混乱，所以关注http://coding.smashingmagazine.com/2013/11/07/an-in-depth-introduction-to-ember-js/
我在 stackoverflow 上看到了一些类似的帖子，但是代码太复杂了，我无法理解，而且我的问题非常基础，没有任何帖子我看到的只是基本的答案。

这是我的“用户”车把模板。它是用 index.html 编写的。我只放了车把脚本部分。

<script type="text/x-handlebars" id="users">
    <div>

    <ul class="users-listing">
        {{#each user in controller}}
            <li>{{user.name}} ..... {{user.id}} ..... {{user.NameWithId}}</li>
        {{else}}
            <li>no users… :-(</li>
        {{/each}}
    </ul>

    Total users: {{usersCount}}

    </div>


</script>

这是我的模型

App.ApplicationAdapter = DS.FixtureAdapter;

App.User = DS.Model.extend({
  name         : DS.attr(),
  email        : DS.attr(),
  bio          : DS.attr(),
  avatarUrl    : DS.attr(),
  creationDate : DS.attr()
});

这是我的控制器

App.UsersController = Ember.ArrayController.extend({
  sortProperties: ['id'],
  sortAscending: true, // false = descending

  usersCount: function(){
    return this.get('model.length');
  }.property('@each'),

  NameWithId: function() {
    return this.get('id') + ' -> ' + this.get('name');
  }.property('id', 'name')
});

执行脚本后，我可以看到 ID 和名称，但在 NameWithId 的地方我得到 只是空白 甚至我在 Firefox 中的 Web 控制台也显示 nothing

在我的模板中我改变了

user.NameWithId

到

user.get('NameWithId')

现在我收到 Parse Error: Expecting 'ID', got 'INVALID'

使用：
jQuery 1.10.2
车把 1.0.0
Ember 1.0.0
EmberData 1.0.0-beta3

【问题讨论】：

标签： ember.js handlebars.js

【解决方案1】：

你可以像sevenseacat所说的那样把它放在模型上，或者你可以使用一个itemController，它会用一个控制器来包装数组中的每个项目，这就是你放置这个属性的地方。

App.UsersController = Ember.ArrayController.extend({
   itemController: 'user'
})

App.UserController = Ember.ObjectController.extend({
  NameWithId: function() {
    return this.get('id') + ' -> ' + this.get('name');
  }.property('id', 'name')
});

【讨论】：

非常感谢您帮助新手！也感谢您的代码！

【解决方案2】：

计算的属性应该在模型上，而不是控制器上。它是单个用户实例的属性，而您的控制器是一个 ArrayController，适用于许多用户实例（因此在之前的计算属性声明中使用了 @each）。

【讨论】：

非常感谢帮助新手！