Question

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

我有几个问题： - 我无法弄清楚如何在ember-cli中访问类变量。我已经看到教程显示在ember.js中，它只是App.Listing.CATEGORIES，但我没有得到任何传递我的每个循环。 - 如何检查相应的盒子？我下面有一些可能不起作用的janky代码。

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 computed属性返回一个对象数组，它们观察模型的categories属性，并表示是否在其中找到每个类别。

然后在您的模板中，您可以使用如下代理对象：

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

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

1 个答案: