如何将数据从路由发送到组件？

Question

我是 ember 的初学者。

我想将数据从路由发送到组件。

import Ember from 'ember';
var model = null;
export default Ember.Route.extend({
    model() {
        return true;
    }
});

我已经在路由中定义了这个模型，现在我想在组件 js 文件中使用这个模型。我刚刚做了控制台日志，但它给出了未定义的。我的组件 js 代码如下

import Ember from 'ember';
export default Ember.Component.extend({
    didInsertElement() {
        console.log(model);
    }
});

所以谁能建议在组件中使用路由数据的实际方法是什么。

Answer 1

您只需 return 将需要的数据传递给模板，

import Ember from 'ember';
export default Ember.Route.extend({
    model() {
        //here return model data which requires to display template
        return true;
    }
});

您可以使用 model 访问的内部模板，在本例中您只是发送了 true，因此您的 model 将包含 true。

您需要将此模型传递给组件，以便您可以从组件访问它。里面 template.hbs,

{{my-component model=model }}

您可以在组件中访问模型属性，

import Ember from 'ember';
export default Ember.Component.extend({
    didInsertElement() {
        console.log('Model ',this.get('model'));
    }
});

欢迎来到Ember。我强烈建议您阅读 ember guides and play with ember-twiddle

Answer 2

您需要将数据从模板传递给组件；那是从路线的模板，你需要将任何你想要的（即模型）传递给相应的模型。见下面twiddle的简单演示

在这个例子中； index route returns 来自 model 钩子的 json 对象（具有名称和姓氏字段的对象）。从这个模型钩子返回的内容作为 object 属性传递给 index.hbs 模板文件中的 my-component。然后就可以很方便的访问组件的js和hbs文件中对应的数据了。在这个例子中；数据显示在 my-component.hbs 模板文件中。希望它是清楚的。

如何将数据从路由发送到组件？

How to send data from route to component?

ember.js

ember-data

ember-cli