Ember.js 为多个组件提供数据_Ember.js

Ember.js 为多个组件提供数据

ember.js

Ember.js 为多个组件提供数据,ember.js,Ember.js,我有一个Ember 2.11应用程序模板，目前有几个组件占位符（菜单、面包屑、相关项目），还有一个显示主要内容的插座，工作正常。现在我对基本知识感觉更舒服了，我准备试着让面包屑工作起来我读过关于服务的文章，但我不认为它是面包屑的正确解决方案，因为它不需要持久性，它是基于路线之外的。虽然它是基于路线之外的，但我不想直接使用路线，因为我想使用漂亮的标题，而且在查看特定项目时，路线不能准确反映面包屑应该显示的内容由于breadcrumb基于用于显示的模型，我觉得我应该能够构造一个breadcrum

我有一个Ember 2.11应用程序模板，目前有几个组件占位符（菜单、面包屑、相关项目），还有一个显示主要内容的插座，工作正常。现在我对基本知识感觉更舒服了，我准备试着让面包屑工作起来

我读过关于服务的文章，但我不认为它是面包屑的正确解决方案，因为它不需要持久性，它是基于路线之外的。虽然它是基于路线之外的，但我不想直接使用路线，因为我想使用漂亮的标题，而且在查看特定项目时，路线不能准确反映面包屑应该显示的内容

由于breadcrumb基于用于显示的模型，我觉得我应该能够构造一个breadcrumb对象，然后将其从应用程序模板传递到组件中。我想这就是控制员当年的目的。我的想法是构造一个breadcrumb对象/属性，并将其与RSVP这样的模型一起返回，然后我可以在模板中访问这两个对象，将适当的对象传递给适当的组件。但这似乎是错误的，因为路由应该返回一个Ember数据对象、promise或Javascript数组

我目前的思路是这样的

template/application.hbs

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

route/category/show

export default Ember.Route.extend({
  model(params) {
    let recipe = this.get('store').query('recipe', { category: params.category_id});
    let crumbs = [{name: 'Category', link: 'category'},
                  {name: recipe.category.title, link: 'category.show', target: recipe.category.id}];
    return {recipe: recipe, breadcrumbs: crumbs};
  }
});

我不确定这是否是正确的方法，或者这是否会导致使用Ember数据进行异步数据获取时出现问题。像这样的东西，我必须在每个路线上定义，但我没有很多路线，而且在显示菜谱（路线是/recipe/recipe\u id）时似乎提供了灵活性，但面包屑显示

Home>类别>主菜>我的绝妙菜肴

你将如何处理这个问题

更新日期2017-02-10：

模型似乎没有传递给应用程序模板，而只是传递给路由模板。我不知道如何将数据“向下”传递到应用程序模板。

仍在思考中，如果您希望在访问的路径中将模型作为控制器的变量传递，则需要如下内容：

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');

有了它，在控制器中，您可以像这样访问碎屑：

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处设置crumps变量，这将该控制器中定义的变量设置为应用程序的全局变量，因此您可以通过

didupadtelement（）

或

didupadtelement（）从其他控制器和应用程序控制器查找中修改这些变量以进行更改

希望这能解决你的问题

问候语

留在您的思维路线中，如果您想在访问的路线中将您的模型作为控制器的变量传递，您需要这样的东西：

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');