Question

我已经倾注了大量的文档，我似乎无法找到一个非常基本的问题的答案。我有一个组件需要将地图（键/值）存储为属性：

App.SimpleTestComponent = Ember.Component.extend({
    data: Ember.A(),
    actions: {
        add: function() {
            this.get('data').set('test', 'value');
        }
    }
});

组件的模板如下所示：

<script type="text/x-handlebars" data-template-name="components/simple-test">
    {{#each item in data}}
        <p>
            <strong>{{item.key}}:</strong>
            {{ item.value}}
        </p>
    {{/each}}
    <button {{action 'add'}}>Add</button>
</script>

然而，这不起作用。 No items are displayed after clicking the button问题似乎与{{#each}}阻止有关。如何正确枚举data属性？

Answer 1

Ember.A()是Ember.NativeArray的简写。这就是你的原因代码不起作用，您还调用.set这是一种方法继承自Ember.Observable。所以你真正在做的是只是在数组上设置一个对象属性而不是它内容。

您可能想要的是Ember.Map这是一个内部类但许多开发人员仍然使用它。你仍然需要返回一个对象数组如下例所示：

 App.SimpleTestComponent = Ember.Component.extend({
    // Shared map among all SimpleTestComponents
    map: Ember.Map.create(),
    // Or per component map
    init: function() {
      this.set('map', Ember.Map.create());
    },

    data: function() {
      // this doesn't have to be locally scoped...
      var arr = Ember.A();
      this.get('map').forEach(function(key, value) {
        arr.addObject({key: key, value: value});
      });
      return arr;
    }.property('map'),

    actions: {
        add: function() {
            this.get('map').set('test', 'value');
        }
    } 
});

当你的密钥有倍数时，这并不能真正起作用值只是因为Ember.Map总是覆盖.set

如果表现令人担忧，您希望有多个表现每个键的值然后你需要实现自己的 map class with和handlebars helper来显示它。

创建一个map属性并在模板中枚举其属性？

1 个答案: