如何在同一页面上呈现两个窗格内容

Question

我是 ember/ember-cli 的新手，正在慢慢地了解巨大的学习曲线...... 我遇到了一个问题，我希望有人能给我建议......

我有一个应用程序，它显示联系人，然后将选项卡式内容放在联系人详细信息下方，一个选项卡包含一些注释信息，另一个选项卡包含一些站点位置信息。

我基本上在我的页面上有一个引导"选项卡"部分。 （目前）有两个标签标记为"站点"和"注释"。 这个想法是，如果单击"备注"窗格，则会看到"备注"窗格中的内容，如果单击"网站"，则会看到"网站"窗格中的内容。

为此，我命名了我的插座，例如

{{outlet 'sites-tab'}}

和

{{outlet 'notes-tab'}}

即

{{#em-tabs selected-idx=tab_idx}}
        {{#em-tab-list}}
            {{#em-tab}}Sites{{/em-tab}}
            {{#em-tab}}Notes{{/em-tab}}
            {{#em-tab}}...{{/em-tab}}
        {{/em-tab-list}}
        {{#em-tab-panel}}
            {{outlet 'sites-tab'}}
        {{/em-tab-panel}}
        {{#em-tab-panel}}
            {{outlet 'notes-tab'}}
        {{/em-tab-panel}}
        {{#em-tab-panel}}
            <p>Future Use</p>
        {{/em-tab-panel}}
{{/em-tabs}}

以及使用：

renderTemplate: function() {
        this.render({
              into: 'contacts.show',    // the template to render into
              outlet: 'notes-tab'       // the name of the outlet in that template
        });
    }

在两个 Pod 路由中，将内容放置在正确的位置。

如果我手动使用 URL，例如：

contacts/5961168002383609856/sites
contacts/5961168002383609856/notes

然后将内容呈现到相关的选项卡中（另一个为空）。

每个 Pod 结构如下：

app/pods/notes/-form/template.hbs
app/pods/notes/edit/controller.js
app/pods/notes/edit/route.js
app/pods/notes/edit/template.hbs
app/pods/notes/index/controller.js
app/pods/notes/index/route.js
app/pods/notes/index/template.hbs
app/pods/notes/new/controller.js
app/pods/notes/new/route.js
app/pods/notes/new/template.hbs
app/pods/notes/show/controller.js
app/pods/notes/show/route.js
app/pods/notes/show/template.hbs
app/pods/notes/base-controller.js
app/pods/notes/route.js

你能想到什么会让 Ember-CLI 将两个内容呈现在同一页面上的每个插座中吗？

我的应用程序/路由器.js包含：

Router.map(function() {
    this.resource("contacts", function() {
        this.route("new");
        this.route("edit", {path: ':contact_id/edit'});
        this.route("show", {path: ':contact_id'}, function(){
            this.resource("notes", function() {
                this.route('new');
                this.route('edit', {path: ':note_id/edit'});
            });
            this.resource("sites", function() {
                this.route('new');
                this.route('edit', {path: ':site_id/edit'});
            });
        });
    });
});

非常感谢您能建议的任何帮助..谢谢。

编辑：

好的，根据Selikoff的建议@Sam我尝试切换到组件，执行以下操作：

ember generate component contact-sites
ember generate component contact-notes

创建了文件：

app/components/contact-notes.js
app/components/contact-sites.js
and
app/templates/components/contact-notes.hbs
app/templates/components/contact-sites.hbs

然后，我将模板 html 从 pods/notes/index/template.hbs 移动到 app/templates/components/contact-notes.hbs

这（经过一些调整）似乎可以正确显示内容。 然后我继续编辑笔记。 为此，我有一个带有操作的按钮：{{action "editNote" note}}因此必须将我的操作从pods/notes/index/route.js移动到app/components/contact-notes.js

例如：

应用程序/组件/联系人笔记.js

import Ember from 'ember';
export default Ember.Component.extend({
    actions: {
        newnote: function(note) {
            console.log("NEW NOTE:", note.contact);
            this.transitionTo('notes.new');
            return false;
        },
        editNote: function(note) {
            console.log("Edit Note:", this);
            this._transitionTo('notes.edit', note);
            return false;
        }
    }
});

但我似乎无法让编辑笔记路由工作。 我要么（使用 this._transitionTo('notes.edit', note); ）收到错误说：

DEPRECATION: Ember.View#transitionTo has been deprecated, it is for internal use only

或者如果我使用this._transitionTo('notes.edit', note);则会出现不同的错误：

TypeError: currentState is undefined
     if (currentState.enter) { currentState.enter(this); }

关于如何从组件内访问路由的任何想法？ - 谢谢。

Answer 1

一般来说，你不需要经常调用render或使用命名的插座。相反，使用组件，例如

{{#em-tabs selected-idx=tab_idx}}
    {{#em-tab-list}}
        {{#em-tab}}Sites{{/em-tab}}
        {{#em-tab}}Notes{{/em-tab}}
    {{/em-tab-list}}
    {{#em-tab-panel}}
        {{contact-sites site=contact.sites}}
    {{/em-tab-panel}}
    {{#em-tab-panel}}
        {{contact-notes notes=contact.notes}}
    {{/em-tab-panel}}
{{/em-tabs}}

请记住，您的 URL 结构与界面的呈现方式有关，因此如果您希望同时显示两件事，请不要将它们绑定到两个不同的 URL。