emberjs为多个组件提供数据

时间:2017-02-10 00:11:12

标签: ember.js

我有一个Ember 2.11应用程序模板,目前有一些组件占位符(菜单,面包屑,相关项目)和一个显示正常工作的主要内容的插座。现在我对基础知识感觉更舒服了,我已经准备好尝试让面包屑工作了。

我读到了有关服务的信息,但我没有看到它是面包屑的正确解决方案,因为它不需要持久化,它基于路线。虽然它基于路线,但我不想按字面意思使用路线,因为我想使用好的标题,并且在查看特定项目时,路线不能准确反映面包屑应该显示的内容。

由于面包屑基于用于显示的模型,我觉得我应该能够构造一个面包屑对象,然后将其传递到应用程序模板的组件中。我想这是当天控制器的目的。我的想法是在构建面包屑对象/属性的路径中,并使用RSVP这样的模型返回它,然后我可以在模板中访问它们以将适当的对象传递给适当的组件。但这似乎是错误的,因为路由应该返回Ember数据对象,promise或Javascript数组。

我目前的思路是这样的。

mksh

template/application.hbs

{{bread-crumbs crumbs=model.breadcrumbs}} {{outlet}}

route/category/show

我不确定这是否是解决此问题的正确方法,或者这是否会导致使用Ember数据获取异步数据时出现问题。我必须在每条路线上定义这样的东西,但是我没有很多路线,并且在我显示配方(路线是/ recipe / recipe_id)时似乎提供了灵活性,但是有面包屑显示{{ 1}}。

你会如何处理这个问题?

更新了2017-02-10:

似乎模型未传递给应用程序模板,只传递给路径模板。我不确定如何将数据“向下”传递给应用程序模板。

2 个答案:

答案 0 :(得分:0)

如果你想在你正在访问的路线中将你的模型作为控制器的变量传递给你的思维线,你需要这样的东西:

export default Ember.Route.extend({
    model(params){
        let recipe = ...;
        let crumbs = ...;

        return {...};
    },
    setupController(controller, model){
        this._super(controller, model);
        controller.set('variable', model);
    }
});

有了这个,你可以在你的控制器中访问这样的碎屑:

this.get('variable');

然后使用Ember.computed,您可以创建一个变量以便在模板中显示。

很抱歉最小化您的代码,但我不在我的电脑中。

另一种方法是在应用程序控制器的init处设置crumbs变量,这会将该控制器中定义的变量全局设置为应用程序,因此您可以从其他控制器修改它们,并在应用程序控制器中通过{查找该更改{1}}或didUpdateAttrs()

希望这可以解决您的问题。

问候

答案 1 :(得分:0)

您可以通过跟踪service中的元素来创建这样的面包屑,但我要查看ember-crumbly插件。看起来它会满足您的需求。