Question

我正在尝试使用Ember创建一个主/详细UI，这与我查看过的大多数指南/演示中显示的典型场景略有不同。在我的情况下，我希望有一个用户列表（从/病人加载），其中每个用户元素都有自己的专用详细信息面板（从/ 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相比会更好吗？

Answer 1

您的{{outlet}}位于每个循环内部，这意味着您的网页上将有与患者一样多的出口...尝试

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

主细节UI中的Ember嵌套视图

1 个答案: