Question

我是ember / ember-cli的新手，我正在慢慢地探索巨大的学习曲线......我遇到了一个问题，我希望有人可以告诉我......

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

我基本上有一个Bootstrap＆＃34; Tabbed＆＃34;部分到我的页面。使用（目前）两个标签＆＃34; Sites＆＃34;和＆＃34;注意＆＃34;。想法是，如果您单击Notes，您会看到Notes窗格中的内容，如果您单击站点，则会看到来自Sites Pod的内容。

要做到这一点，我正在命名我的网点，例如

{{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路线中将内容放在正确的位置。

如果我手动使用网址，例如：

contacts/5961168002383609856/sites
contacts/5961168002383609856/notes

然后将内容呈现到相关的标签中（另一个是空的）。

每个豆荚结构都沿着以下几行：

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将两个内容呈现在同一页面上的每个插座中吗？

我的app / router.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'});
            });
        });
    });
});

非常感谢您提供任何帮助，谢谢。

编辑：

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

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

例如：

应用/组件/接触notes.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}}

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

如何在同一页面上呈现两个pod内容？

1 个答案: