Как визуализировать содержимое двух стручков на одной странице?

Question

Я новичок в ember/ember-cli и медленно осваиваю огромную кривую обучения... Я столкнулся с проблемой, на которую я надеялся, что кто-то может посоветовать мне...

У меня есть приложение, которое отображает контакт, а затем помещает вкладки под сведениями о контакте, одна вкладка содержит некоторые примечания, а другая - информацию о местоположении сайта.

По сути, у меня есть раздел Bootstrap "Tabbed" на моей странице. С (в настоящее время) двумя вкладками с надписями "Сайты" и "Заметки". Идея заключается в том, что если вы нажмете "Заметки", вы увидите контент из модуля "Примечания", а если вы нажмете "Сайты", вы увидите содержимое из модуля "Сайты".

Для этого я называю свои магазины, например,

{{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
        });

    }

в двух маршрутах, чтобы разместить контент в нужном месте.

если я использую URL-адреса вручную, например:

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}}

Помните, что ваша структура URL связана с тем, как ваш интерфейс отображается, поэтому, если вы хотите, чтобы две вещи отображались одновременно, не связывайте их с двумя разными URL.