Создание свойства карты и перечисление его свойств в шаблоне?

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

1. Ember.A() представляет собой сокращенную Ember.NativeArray. Вот почему ваш код не работает, вы также звоните .set, который является методом унаследован от Ember.Observable. Так что вы действительно делаете , просто устанавливая свойство объекта в массиве, а не его содержимое .

2. Что вы, возможно, хотите, это 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'); 
        } 
       } 
   }); 
   

   Это на самом деле не работает, когда у вас есть ключи, которые имеют кратные значения просто becauses Ember.Map всегда переписывает на .set

3. If производительность вызывает беспокойство, и вы хотели бы иметь несколько значений на ключ, тогда вам нужно будет реализовать свой собственный класс карты с помощью хелпера руля, чтобы отобразить его.