使用 Ember js 从非嵌套路由访问路由模型答案

【问题标题】：Access a route model from non nested route with Ember js使用 Ember js 从非嵌套路由访问路由模型
【发布时间】：2016-02-08 02:52:44
【问题描述】：

我想知道从不同的非嵌套路由控制器访问路由模型的适当方法。如果我的路线是这样设置的：（这可行，但不确定它是否正确）

App.Router.map(function() {
  this.route('admin'); 
  this.route('page1');
}

Page 1 路由有这样的模型：

App.page1Model = {content:'Content of simple model'};

App.Page1Route = Ember.Route.extend({
   model(){
      return App.page1Model;
});

那么admin控制器要访问page1路由，我只能这样：

App.AdminController = Ember.Controller.extend({
    page1Model:App.page1Model,

    Now do stuff with page1Model.....
});

我尝试使用 Ember.inject.controller() 但这仅适用于我的路由嵌套并且我想从子级访问父级控制器。有没有办法使用该语法来获得我想要的，或者有没有比我正在做的更好的方法？

谢谢

【问题讨论】：

标签： javascript ember.js ember-router

【解决方案1】：

您所要求的内容存在一个固有问题：当用户在admin 页面上时，他们不在page1 页面上，因此没有page1 上下文。您可能想问的一些问题：

如果用户访问 /admin 却从未访问过 /page1，会发生什么情况？
如果用户转到/page1 然后/page2 然后/admin 会发生什么？

我能想到两种 Ember-esque 方式来做你想做的事：

Page1ModelService。在这里，您创建了一个 Ember.Service，它包含一个 Page1Model 的实例。您将服务注入route:page1 和route:admin 并让它们各自退出实例。他们是否可以更改正在显示的模型实例取决于您。
在model 挂钩中为route:application 返回一个Page1Model 实例。这条路线位于route:page1 和route:admin 之上，因此它们都可以按如下方式查找模型：

// 路由：应用程序模型（） { 返回 App.Page1Model.create(); }

// 路由：page1 模型（） { 返回 this.modelFor('application'); }

【讨论】：

感谢@James A. Rosen 提供的信息。你提出的问题不应该影响任何事情。我只希望管理页面能够更新 page1 上的内容。所以只要在 admin 中对更新 page1 内容所做的任何更改都反映在 page1 中，就没有问题。查看 page1 或 admin 的顺序不应影响任何内容。我喜欢服务的第一个建议，我希望它们都共享相同的确切实例，因此如果管理员更新，page1 会反映。我以前没有使用过服务，这有可能得到我想要的吗？我现在就试试。再次感谢
服务是存储共享状态的好地方。我建议尝试这种机制。您可以将服务注入相关路由并让它们从服务中查找正确的模型。
这正是我在下面的回复中所做的：App.register('model:page1', page1ModelFactory); App.inject('controller:admin','page1Model','model:page1');而且效果很好！

【解决方案2】：

我能够通过使用寄存器和注入来实现我的目标。有人可以看看，让我知道这是否符合 Ember 标准，或者是否有更好的方法（@James A. Rosen :)）？

哦！如果有更好的方法将模型附加到 page1 路由，请告诉我。虽然我不确定我是否喜欢 create() 之后的 .model，但这很有效。

JSBIN：http://jsbin.com/tikezoyube/1/edit?html,js,output

那个JS：

var App = Ember.Application.create();
var page1Model = {title:'Old Title'};
var page1ModelFactory = Ember.Object.extend({
    model : page1Model
});

App.Router.map(function(){
    this.route('page1');
    this.route('admin');
});

App.register('model:page1', page1ModelFactory);
App.inject('controller:admin','page1Model','model:page1');

App.Page1Route = Ember.Route.extend({
    model(){ return page1ModelFactory.create().model; }
});

App.AdminController = Ember.Controller.extend({
    actions:{
        updateTitle:function(){
            console.log(this.get('page1Model').model.title);

            this.get('page1Model').set('model.title','THE NEW TITLE!');

            console.log(this.get('page1Model').model.title);

            this.transitionToRoute('page1');
        }
    }
});

谢谢！

【讨论】：