Question

我是初学者。

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

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

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

之下

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

所以任何人都可以建议在组件中使用路由数据的实际方法。

Answer 1

您只需返回将其传递给模板所需的数据，

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并使用ember-twiddle

Answer 2

您需要将数据从模板传递给组件;这是来自路线的模板，你需要将你想要的任何东西（即模型）传递给相应的模型。请参阅以下twiddle进行简单演示。

在这个例子中; index路由从model挂钩返回一个json对象（一个名为＆amp; surname字段的对象）。从此模型钩子返回的内容将作为my-component属性传递到index.hbs模板文件中的object。然后，您可以轻松访问组件的js和hbs文件中的相应数据。在这个例子中;数据显示在my-component.hbs模板文件中。希望很清楚。

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

2 个答案: