【发布时间】：2015-01-20 16:50:48
【问题描述】：
我是 ember/ember-cli 的新手，正在慢慢了解巨大的学习曲线...我遇到了一个问题，希望有人能给我建议...
我有一个显示联系人的应用程序，然后将选项卡式内容放在联系人详细信息下方，一个选项卡包含一些注释信息，另一个选项卡包含一些站点位置信息。
我的页面基本上有一个引导程序“选项卡”部分。使用（当前）两个标签为“站点”和“注释”。这个想法是，如果您单击 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
});
}
在两个 pods 路由中将内容放置在正确的位置。
如果我手动使用网址，例如：
contacts/5961168002383609856/sites
contacts/5961168002383609856/notes
然后将内容渲染到相关的Tab中（另一个为空）。
每个 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 将两个内容呈现到同一页面上的每个插座中吗？
我的 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
例如：
app/components/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;
}
}
});
但我似乎无法让编辑笔记路线工作。我要么（使用 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); }
关于如何从组件内到达路由有什么想法吗？ - 谢谢。
【问题讨论】：
标签： ember.js ember-cli ember-cli-pods