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'); returns 商店中的一系列餐厅，最终填充控制器的模型。

如果您想在组件中访问模型中包含的数据，您应该将模型作为参数传递到组件中。

因此，您可以按如下方式传递餐厅数组（根据需要重命名属性）：

{{main-map data=model}}

或者，如果理论上你想为每个 restaurant 显示一个组件：

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

Ember：访问 Ember 组件中的数据存储

Ember: Accessing a data store in an Ember component

ember.js

ember-data

ember-cli