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，我想知道它是否与模块内部 this 的上下文有关？

如果我不知道该怎么做，请告诉他们！

更新：为上下文添加路由、控制器和模板。

路线

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}}