如何在 ember-cli 中迭代 Handlebars 中的类变量？

Question

我想在 ember-cli 中遍历 Handlebars 中的类变量数组以生成复选框（类别）列表，并根据模型所属的类别选中相应的复选框。

我有几个问题： - 我不知道如何在 ember-cli 中访问类变量。我已经看到在 ember.js 中显示的教程，它只是 App.Listing.CATEGORIES，但我的每个循环都没有通过。 - 如何勾选相应的方框？我下面有一些乱码，可能不起作用。

listing.js：

import DS from "ember-data";

var Listing = DS.Model.extend({
    categories: DS.attr(), // string array
});

Listing.reopenClass({
    CATEGORIES: ['park', 'outdoors']
});

export default Listing;

show.hbs:

<ul>
{{#each category in CATEGORIES}}
<li>{{input type="checkbox" name=category checked=categories.contains(category)}} {{category}}</li>

{{/each}}
</ul>

Answer 1

Handlebars 模板不能像那样查找类，像 categories.contains(category) 这样的复杂逻辑也不起作用。您需要向控制器或组件添加计算属性，以向模板提供代理对象。假设它是一个控制器，这里是一个粗略的例子：

export default Ember.Controller.extend({
  selectableCategories: function() {
    var model = this.get('model');

    return model.constructor.CATEGORIES.map(function(category) {
      var categoryProxy = Ember.Object.create({
        model: model,
        name: category,
        checked: function(key, value) {
          var model = this.get('model');

          // setter; the checkbox value has changed
          if (arguments.length > 1) {
            if (model.get('categories').contains(this.get('name'))) {
              model.get('categories').removeObject(this.get('name'));
            }
            else {
              model.get('categories').addObject(this.get('name'));
            }
          }

          // getter; the template is checking whether the checkbox should be checked
          return model.get('categories').contains(this.get('name'));
        }.property('model.categories')
      });

      return categoryProxy;
    });
  }.property('model.categories')
});

selectableCategories 计算属性返回一个对象数组，这些对象观察模型的 categories 属性并表示是否在其中找到每个类别。

然后在您的模板中，您可以像这样使用代理对象：

{{#each category in selectableCategories}}
  {{input type="checkbox" name=category.name checked=category.checked}} {{category.name}}
{{/each}}