我是 ember/ember-cli 的新手，并且正在慢慢了解巨大的学习曲线......我遇到了一个问题，我希望有人能给我提供建议......
我有一个显示联系人的应用程序，然后将选项卡式内容放在联系人详细信息下方，一个选项卡包含一些注释信息，另一个选项卡包含一些站点位置信息。
我的页面基本上有一个引导程序“选项卡”部分。使用（当前）两个标签为“站点”和“注释”。这个想法是，如果您单击 Notes，您会看到来自 Notes 窗格的内容，如果您单击站点，您会看到来自 Sites Pod 的内容。
为此，我将命名我的网点，例如
{{outlet 'sites-tab'}}
和
{{outlet 'notes-tab'}}
IE
{{#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
然后将内容渲染到相关的 Tab 中（另一个为空）。
每个吊舱结构都遵循以下原则：
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
然后我将我的模板 htmlpods/notes/index/template.hbs从app/templates/components/contact-notes.hbs
这（经过一些调整）似乎可以正确显示内容。然后我继续编辑注释。为此，我有一个带有动作的按钮：{{action "editNote" note}}所以必须将我的动作pods/notes/index/route.js从app/components/contact-notes.js
例如：
应用程序/组件/contact-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;
}
}
});
但我似乎无法让 Edit Note Route 工作。我要么（使用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); }
关于如何从组件内到达路线的任何想法？- 谢谢。