主详细信息 UI 中的 Ember 嵌套视图答案

【问题标题】：Ember Nested Views in Master Detail UI主详细信息 UI 中的 Ember 嵌套视图
【发布时间】：2015-04-15 20:09:20
【问题描述】：

我正在尝试使用 Ember 创建一个主/详细 UI，这与我查看过的大多数指南/演示中显示的典型场景略有不同。就我而言，我想要一个用户列表（从 /patients 加载），其中每个用户元素都有自己的专用详细信息面板，该面板被填充（从 /patients/:id 加载其他详细信息）并在元素/按钮时呈现在主视图中单击。典型的主/详细在线演示将元素列表中任何元素的详细信息呈现为页面某处的单个详细信息元素。

路由器：

App.Router.map(function() {
    this.resource('patients', function() {
    this.resource('patient', { path: ':patient_id' });
    });
});

型号：

App.PatientsRoute = Ember.Route.extend({
    model: function() {
    return this.store.find('patient');
    }
});

App.PatientRoute = Ember.Route.extend({
    model: function() {
    return this.store.find('patient', 1);
    }
});

模板：

<script type="text/x-handlebars">
    {{outlet}}
</script>

<script type="text/x-handlebars" id="patients">
{{#each item in model}}
    {{#link-to "patient" item}}show detail{{/link-to}}
    ...info....
    {{outlet}} <--where "patient" detail panel goes
{{/each}}

<script type="text/x-handlebars" id="patient">
    ....detail info....
</script>

这会检索并呈现患者列表。但是，当单击任何详细信息链接时，将为列表中的每个患者呈现所有子详细信息面板。我如何只为单击的父级显示/渲染子级“患者”详细信息？与#link-to 相比，使用操作会更好吗？

【问题讨论】：

标签： ember.js

【解决方案1】：

您的 {{outlet}} 在每个循环内，这意味着您的页面上的分店数量与患者数量一样多……试试

{{#each item in model}}
    {{#link-to "patient" item}}show detail{{/link-to}}
{{/each}}
{{outlet}} <--where "patient" detail panel goes

【讨论】：