我正在重构一个继承的 Ember 应用程序，它有相当多的非 mvc 困惑。我希望尽可能保持模块化，并希望在多个屏幕中重用各种 ui 组件以帮助防止代码重复。

看来 outlets 是最好的方式。

现在，我有一个显示多个元素的 UI，每个元素都使用模板化 View 呈现。

{{#each item in controller}}
      {{view App.ItemThumbView}}
{{/each}}

此 View 的右侧边栏是一个根据选择而变化的 socket 。 When I select an item, I would like to display a list of edit operations within the templatized sub-view, which when selected, reveal the proper edit UI through a nested outlet.

本质上

+---------------------------------------------------+
|        Parent Pane
|
| +------------------------------+ +----------+
| |  Device Section              | | Sidebar  |
| |                              | | [Outlet] |
| |  +--------+ +---------+      | |          |
| |  | Dev 1  | |  Dev 2  |      | |          |
| |  |[outlet]| | [outlet]|      | +----------+
| |  +--------+ +---------+      |
| +------------------------------+ 
+--------------------------------------------------+

嵌套 View 都共享同一个 Controller ——这是有道理的——但我需要能够将选定的 View 连接到其相应的 socket 。我最初尝试连接 socket 的尝试从未显示。代码根本没有失败，所以 Controller 只是更新了一个隐藏的 socket 。

如何在 Ember 中为嵌套 View 定位正确的导出？ (充其量，我似乎能够点击侧边栏 socket ，但不能点击嵌套设备模板中的 socket 。)首先，这是在 ember 中实现上下文菜单的合理结构吗？

* 澄清一下 在我当前的设置中，每个设备项都使用相同的模板呈现。选择后，侧边栏 socket 将更新一些设备的元信息，而所选设备 View 也会将其 socket 连接到编辑菜单。一次只能连接一个设备项的“编辑” socket 。

在这里甚至使用 socket 是否有意义，或者我是否应该将条件逻辑放入模板中以便在必要时显示编辑菜单？

更新以重述问题的最佳实践部分:

Outlets 似乎非常适合解耦组件和面向 future 的潜在 View 嵌套。但现在似乎访问嵌套 View 的正确导出有点麻烦。此外，如果您始终知道哪些组件将有条件地嵌套在模板中，那么对您的 View 进行硬编码似乎是最简单的。例如:

// within template used for individual result-list items
{{#if condition }}
   {{view reusableSubView}}
{{/if} 

在这里做事的首选 ember 方式是什么？创建不一定始终连接的网点是否有任何开销？

最佳答案

好吧，在玩了好几个小时之后，似乎最好有条件地在我的嵌套 View 正上方的级别中包含一个命名 socket 。

这是因为您需要一个单一、可靠的导出作为模板中的目标，而且似乎没有一种在运行时以编程方式命名导出的好方法。

此外，您希望定位的导出需要存在于路由器、 Controller 和用于渲染屏幕当前状态的渲染模板嵌套中的父模板中的某个位置。如果父路由对象没有放置导出，您就不能希望在您的叶节点路由中定位它。

让我用一个例子来解释:

自从我最初提出问题后，我们的 UI 已从设备列表更改为人员列表，但原理保持不变。

我有一个带有照片的人员列表，可以单击他们以在他们的结果旁边显示更多信息。

我有一个类似这样的人员模板:

<script type="text/x-handlebars" data-template-name="people" >
    <h3>People in this group</h3>
    <div class="peeps">
        {{#each controller}}
             {{ view App.PersonView }}
             {{#if selected }}
                   <div class='too-personal'>
                   {{ outlet veryPersonalDetails }}
                   </div>
             {{/if}}
         {{/each}} 
    </div>
</script>

还有一个类似这样的人物模板:

<script type="text/x-handlebars" data-template-name="person" >
        {{#linkTo person this}}
            <div data-desc="person-item" class="item">
                <div class="portrait">
                    <img class="avatar" {{bindAttr src="gravatarUrl"}}/>
                </div>
                <div class="statuslabel"><span {{bindAttr class=":label statusLabel"}}>{{statusText}}</span></div>
                <div class="cTitle">{{fullName}}</div>
            </div>
        {{/linkTo}}     </script>

以及带有额外信息和编辑选项的详细信息模板

<script type="text/x-handlebars" data-template-name="person/details" > 
various edit options    
</script>

点击人员结果后，我的路由器获取 url 更新，并将详细信息模板 stub 到父人员模板中。我的路由器设置如下:

App.Router.map(function() {
...
    this.resource('people', { path: '/people'}, function() {
        this.resource('person', { path: '/:person_id' },
            function() {
                this.route('details');
            }
        );
    });

});

对于单独的路线:

App.PeopleRoute = Ember.Route.extend({
    model: function() {
        return App.People.find();
    },
    setupController: function(controller, model) {
        controller.set('content', model);
    }
});

App.PersonRoute = Ember.Route.extend({
    model: function(params) {
        return App.People.peepsById[params.person_id];
    },

    setupController: function(controller, model) {
        this._super(controller, model);
        var person = model;
// this block ensures that only one person has a selected status at a time
// ignore the overly-verbose code. I'm cleaning it up tomorrow 
        var ls = App.People.lastSelected;
        if (ls) {
            ls.set('selected', false);
        }
        person.set('selected', true);
        App.People.lastSelected = person;
        controller.set('content', model);
    },

    renderTemplate: function() {
        // person is actually stored in router 'context' rather than 'model'
        // omg!
        var x = this.controllerFor('personDetails').set('content', this.get('context'));
        this.render('person/details', { // render person/details
            into:'people', // into the people template
            outlet: "veryPersonalDetails", // at the veryPersonalDetails outlet
            controller: x // using the personDetails controller for rendering
        });

// additional rendering in sidebar outlet for testing
        this.render('person/details',{
            into:'people',
            outlet: "personDetails",
            controller: x
        });

        console.log("@@@ we did it!");
    }
});

我最初尝试在 PersonView 中设置导出，但这行不通，因为我的 person 模板实际上是在 people 路由中呈现的。当应用程序到达 person 路由时， Controller 已经渲染了列表中的所有人员。我要针对的那个人早就过去了。

通过让路由充当父模板和所需子模板之间的中介，我能够做到这一点。

最后，关于是在模板中显式声明嵌套 View ，还是只使用 outlet 的问题，我认为 outlet 更简洁。虽然此解决方案涉及一些绕过路由的工作，但它比拥有过于复杂的模板对象要好得多。现在，我有望实现任意复杂的模板嵌套，而无需触及任何内容，只涉及渲染中涉及的路由。

此外，该解决方案消除了未使用 socket 的开销。我相信您应该只拥有打算使用的导出，而不是在“dom”中乱扔一堆空容器对象。

关于javascript - Ember.js——我如何定位嵌套/重复 View 中的导出，以及此类 ui 布局的最佳实践是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13925233/