Question

emberjs的文档明确指出you should not use controllers，但有时您需要将数据传递到不是相应路径模型的组件中。例如，在我正在处理的应用程序中，我想从商店中检索记录列表并将其显示在组件中，以便用户可以选择它们作为该路径的模型属性。

我收到的建议是要么创建一个控制器并使用它来检索有问题的列表，要么添加记录列表作为该路由模型的属性，但由于前者是不可取的，所以后者只有在有问题的项目是模型模式的逻辑部分时才有意义（因此无论如何都应该在那里）我对这个看似简单的事情应该怎么做感到困惑。有人可以帮忙吗？

Answer 1

您可以在路线模型钩子中使用Ember.RSVP.hash。当promise解析时，结果将作为setupController中的第二个参数传递。

// This would be in a route file like app/blogs/edit/route.js

model: function() {
    return Ember.RSVP.hash({
        blog: this.store.findRecord('blog', 1),
        categories: this.store.findAll('category'),
    });
},

setupController: function(controller, models) {
    this._super(controller, models);
    controller.set('model', models.blog);
    controller.set('categories', models.categories);
},

或

如果您希望组件中存在所有数据逻辑，则可以注入数据存储服务。这违背了DDAU的口头禅（数据向下，行动起来），但IMO是一个干净的模块化解决方案。如果额外内容不能立即可见，即：打开模态窗口的组件，则很有用。

// This would live within the actual component store: Ember.inject.service(), loadCategories: function() { this.get('store').findAll('category').then((categories) => { this.set('categories', categories); }); }.on('init'),

但是，如果数据（此示例中的类别）在布局中立即可见，我会建议不要这样做。 Ember将不会等待这些请求在渲染之前完成，因此您将看到空格/等于半秒后加载实际值的任何内容。

Answer 2

请注意，组件对自己以外的任何事情都不了解。我解决问题的方法是通过传递您想要访问组件的属性在控制器和组件之间建立一个桥梁。

<script type="text/x-handlebars" data-template-name="sample-com">
  {{sample-com
    sampleRequests=sampleRequests
  }}
</script>

App.MainController = Ember.Controller.extend({
    //bridged properties that the controller must communicate between components/view
  sampleRequests: 'hello world'
});

App.SampleComComponent = Ember.Component.extend({
 sampleRequests: null
});

如果有更好的方法，请随时提出建议。

EmberJs：如何在不使用控制器的情况下将数据传递给组件

2 个答案: