如何从 ember-cli 中的 Handlebars 迭代 class 变量？

Question

我想遍历 ember-cli 中 Handlebars 中的 class 变量数组，以生成复选框（类别）列表，并根据类别勾选适当的复选框该模型属于。

我有几个问题： - 我不知道如何在 ember-cli 中访问 class 变量。我已经看到教程显示在 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 计算出属性 returns 观察模型的 categories 属性并表示是否在其中找到每个类别的对象数组。

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

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

如何从 ember-cli 中的 Handlebars 迭代 class 变量？

How to iterate over class variables from Handlebars in ember-cli?

ember.js

ember-data

ember-cli