Ember: Доступ к хранилищу данных в компоненте Ember

Question

У меня есть компонент, который я также хочу предоставить. Я использую Ember-CLI, если это помогает.

Компонент - это карта, которую я загружаю на страницу, чтобы я не хотел размещать маркеры. Я использовал компонент, чтобы использовать способ didInsertElement, чтобы получить доступ к элементу, когда он будет готов.

export default Ember.Component.extend({ 
    componentMap: '', 
    didInsertElement: function() { 
     navigator.geolocation.getCurrentPosition(position => { 
      //Initialize map... 
      this.populateMap(); 
     }); 
    }, 
    populateMap: function() { 
     //Get store 
     var store = this.get('parentView.targetObject.store'); 
     console.log(store); 
     //Search Store 
     var data = store.find('restaurant'); 
     //Where is the data?! 
     data.map(item => { 
      console.log(item.get('name')); 
     }); 
    } 
}); 

У меня возникли проблемы с получением данных из магазина. Я видел пару методов, here показывает два разных метода. Первый - this.get('parentView.targetObject.store') или this.get('targetObject.store'). Я также пробовал метод {{component store=store}}, но это тоже не работало для меня. Это может быть связано с фундаментальным недостатком понимания потока данных в приложении ember.

Я использую Ember CLI, и мне интересно, имеет ли он какое-либо отношение к контексту внутри модулей?

Если я ухожу от базы относительно того, как я должен это делать, пожалуйста, дайте им знать!

UPDATE: добавление маршрута, контроллера и шаблона для контекста.

Маршрут

export default Ember.Route.extend({ 
    model: function() { 
     return this.store.find('restaurant'); 
    } 
}); 

Контроллер

export default Ember.Controller.extend({ 
    actions: { 
     add: function() { 
      var $addForm = $('.add-form'); 
      $addForm.show(); 
     } 
    } 
}); 

шаблона (index.hbs, который выводится в application.hbs {{outlet}})

{{main-map store=store}} 

Спасибо.

Answer 1

Что происходит следующим образом:

модель, связанная с вашим контролем населен как массив ресторанов, а не одну карту или что-нибудь в этом роде.

return this.store.find('restaurant'); возвращает массив ресторанов из магазина, который в конечном итоге заполняет модель вашего контроллера.

Если вам нужен доступ к данным, содержащимся в вашей модели в вашем компоненте, вы должны передать модель в качестве аргумента в свой компонент.

Таким образом, вы можете передать массив ресторанов следующим образом (переименовать свойство в зависимости от обстоятельств):

{{main-map data=model}} 

Или, если в теории вы хотите, чтобы отобразить компонент для каждого restaurant:

{{#each restaurant in model}} 
    {{your-component name=restuarant.name}} 
{{/each}}