Emberjs：访问作为 Promise 的父路由模型（主详细信息）

Question

我的主从页面布局如图所示。我通过#/masters/:master_id 应用程序网址访问此页面。

路由a定义如下：

App.Router.map(function() {
  this.resource('masters', { path: '/masters' }, function() {
       this.route('detail', { path: '/:master_id' });
  });
});

App.MastersRoute = Ember.Route.extend({
   model: function() {
       return App.DataStore.getData('/api/masters'); //returns Promise!
   },

   setupController: function(controller, model) {
      controller.set("content", model);
   }
});

App.MastersDetailRoute = Ember.Route.extend({
   model: function(params) {
      return this.modelFor("masters").find(function(item) {
          return item.get("id") == params.master_id;
      });
   }
});

模板：

<script type="text/x-handlebars-template" data-template-name="masters">
    <div id="masters-grid">
      {{#each master in model}}
         <div {{action "show" master}}>
            {{master.name}}
         </div>
      {{/each}}
    </div>
    <div id="detail">
       {{outlet}}
    </div>
</script>

<script type="text/x-handlebars-template" data-template-name="masters/detail">
   {{model.name}} <br />
   {{model.age}} <br />
   {{model.address}} <br />
</script>

当点击网格中的母版时，我想在详细信息插座中显示它们的详细信息，并且我不想在更改母版选择时从 API 重新加载所有母版。

我对@9​​87654325@ 的模型有疑问，因为this.modelFor("masters") 返回undefined。我认为，这是由于在 model 钩子中返回 Promise 引起的。任何想法或解决方法如何从“子路由”model 钩子中的 Masters 模型或控制器访问一项？

Answer 1

我在这里看到了一些东西。

• 在定义与路由名称具有相同 url 的路由时，无需指定路径
• 详细路线也应该是一种资源，因为它是由模型支持的路线
• 在 Masters 路由中，返回的 Promise 是正确的，并且 ember 原生支持。在 promise 完成之前，路由不会被解析。
• 不需要设置控制器
• 通常最好执行所需的 api 调用来获取详细路由中的单个记录。这只会在第一次加载页面时使用（如果 f5 ing 或来自书签）
• 在您的 master 模板中，您可以使用 id 而不是键入 data-template-name，或者最好还是使用 ember-cli/brocolli 或 grunt 来预编译您的模板
• 为防止在选择行时重新获取模型，请使用把手帮助程序链接到

{{#link-to 'masterDetail' master}} {{master.name}} {{/link-to}}

• 只是为了澄清一下，以这种方式使用link-to将第二个参数中指定的对象作为模型传递给指定的路由（第一个参数）。在您的情况下，master 现在将被设置为 master detail 路由的模型。
• 在大师细节中，无需键入“model”默认上下文（即“this”的值）在您的模板中是控制器，然后如果在控制器上找不到该属性，它会在模型​​中查找它.

希望对你有帮助