如何在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

車把模板不能像這樣查找類，也不能像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}}