Javascript Ember.js v2路由器中的多个插座
我刚刚开始使用Ember.js，一个似乎很有希望的想法是多个门店将多个模板混合在一起，以生成复杂但模块化的布局 但是我不能让它工作。几个月前（2012年年中），似乎有很多关于这方面的问题、答案和例子，但在3月到1.0的时候，他们最近（2012年12月/2013年1月）将路由器改写为“v2”API。这些文档在描述内容方面做得很好，但省略了很多重要的上下文，我还没有找到一个端到端的示例 以下是我读到的：Javascript Ember.js v2路由器中的多个插座,javascript,ember.js,Javascript,Ember.js,我刚刚开始使用Ember.js，一个似乎很有希望的想法是多个门店将多个模板混合在一起，以生成复杂但模块化的布局 但是我不能让它工作。几个月前（2012年年中），似乎有很多关于这方面的问题、答案和例子，但在3月到1.0的时候，他们最近（2012年12月/2013年1月）将路由器改写为“v2”API。这些文档在描述内容方面做得很好，但省略了很多重要的上下文，我还没有找到一个端到端的示例 以下是我读到的： 下的所有内容（最新，但不详尽） （这可能已过时？我每次尝试调用controller.conne
- 下的所有内容（最新，但不详尽）
- （这可能已过时？我每次尝试调用
都失败，出现controller.connectOutlet（）
）未捕获的类型错误：对象没有方法“connectOutlet” - 发布。特别是最下面的几条评论（多个出口的问答）。是的，该要点标记为“警告；过时；有关最新信息，请参阅路线指南”。但是当前的路由指南似乎没有完全描述该行为。指南的这一部分显示了如何渲染到已经存在的不同插座（我可以让它工作），但我无法确定如何连接其他插座或实例化其他模板
- 设置嵌套管线（嵌套资源；不能嵌套管线；但可以自定义嵌套资源的管线），以及根据管线自动实例化的嵌套模板和插座
- 手动实例化模板并将其连接到插座。如果您希望使用多个插座，或者希望插座/模板关系的结构与路线不同，则这似乎是必要的。（下面将有一个例子。基本上，我正在尝试使用一个模板作为mixin，我可以将其嵌入任何我想要的地方。）
- 覆盖路由的控制器（使用
，提供我自己的App.WhateverRoute=Ember.route.extend（）
方法扩展路由），并在此处调用setupController
。如上所述，此操作失败；传递到此方法中的控制器对象没有controller.connectOutlet
方法connectOutlet
Ember.js路由器示例
.出口{
边框：1px纯黑；
填充物：5px；
}
根索引模板。您不应该看到这一点，因为我们将App.IndexRoute重定向到其他位置
关于这个演示
本演示的指南
动物。您已选择：
{{outlet}}
未选择任何动物
猫。我会喵喵叫。像所有的动物一样，我会
{{outlet}}
狗。我会叫。像所有的动物一样，我会叫
{{outlet}}
我还活着
选择“我的出口”的内容：
{{{#链接到“索引”}/（根）{{/linkTo}}
{{{#linkTo“about”}/about{{/linkTo}
{{{linkTo“guide”}/guide{{/linkTo}
{{{链接到“动物”}/动物{{/链接到}
{{{链接到“动物.猫”}/动物/猫{{/链接到}
{{{链接到“动物.狗”}/动物/狗{{/链接到}
{{outlet}}
App=Ember.Application.create（）；
App.Router.map（函数（）{
本资源（“关于”）；
本文件。资源（“指南”）；
这个。资源（“动物”，功能（）{
这条路线（“猫”）；
这条路线（“狗”）；
})
});
App.IndexRoute=Ember.Route.extend({
重定向：函数（）{
这个。过渡到（'about'）；
}
});
App.animalindexroute=Ember.Route.extend({
重定向：函数（）{
这个。过渡到（‘动物。猫’）；
}
});
App.AnimalsCatsRoute=Ember.Route.extend({
设置控制器：功能（控制器、型号）{
//错误：此控制器对象没有connectOutlet方法
//（取消注释以自己查看此内容）
//控制器。连接插座（“动物混合器”）；
}
});
App.initialize（）；
本质上，animal_mixin是一块样板文件，我想作为一个mixin重复使用，通过在那里放置一个插座并将其连接到这个模板，将其放到任何地方。我意识到这个示例是人为的，因为我可以通过“继承”来实现由筑巢结构提供：动物_-mixin的含量可以直接进入“动物”体内模板，我不需要在动物/猫和动物/狗中提到它。如果我想在所有动物中使用它，那就好了，但假设我有另一个/animals子例程，我不想包含这个片段。同样，这个例子是人为的，但我希望问题和意图是明确的。您可以使用多个命名的输出。这里是一个JSFIDLE示例：
哦，哇。你可以在同一个renderTemplate（）处理程序中多次调用此.render（）。回想起来似乎很明显，但我没有想到。谢谢。你能澄清一下何时呈现dom for outlet标头吗？是否每次切换帖子时都会重新渲染它？另外，你需要调用此.render（'header'）吗在每一条路线的renderTemplate？您好，只有在特别重写的情况下，才会重新呈现指定的出口。一般来说，您应该靠近co
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ember.js Router Example</title>
<style>
.outlet {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<script type="text/x-handlebars" data-template-name="index">
<p>Root index template. You should not see this because we redirect App.IndexRoute elsewhere.</p>
</script>
<script type="text/x-handlebars" data-template-name="about">
<p>About this demo.</p>
</script>
<script type="text/x-handlebars" data-template-name="guide">
<p>Guide to this demo.</p>
</script>
<script type="text/x-handlebars" data-template-name="animals">
<p>Animals. You have selected:</p>
<div class='outlet'>{{ outlet }}</div>
</script>
<script type="text/x-handlebars" data-template-name="animals/index">
<!-- you will not see this unless you disable App.AnimalsIndexRoute redirect. -->
<p>No animal selected.</p>
</script>
<script type="text/x-handlebars" data-template-name="animals/cats">
<p>Cat. I can meow. Like all animals, I
<span class='outlet'>{{ outlet }}</span>
</p>
</script>
<script type="text/x-handlebars" data-template-name="animals/dogs">
<p>Dog. I can bark. Like all animals, I
<span class='outlet'>{{ outlet }}</span>
</p>
</script>
<script type="text/x-handlebars" data-template-name="animal_mixin">
<p>am alive.</p>
</script>
<script type="text/x-handlebars" data-template-name="application">
<div class="container">
<p>
Select contents for my outlet:
{{#linkTo "index"}}/ (root){{/linkTo}}
{{#linkTo "about"}}/about{{/linkTo}}
{{#linkTo "guide"}}/guide{{/linkTo}}
{{#linkTo "animals"}}/animals{{/linkTo}}
{{#linkTo "animals.cats"}}/animals/cats{{/linkTo}}
{{#linkTo "animals.dogs"}}/animals/dogs{{/linkTo}}
</p>
<div class='outlet'>
{{ outlet }}
</div>
</div>
</script>
<script>
App = Ember.Application.create();
App.Router.map(function() {
this.resource("about");
this.resource("guide");
this.resource("animals", function() {
this.route("cats");
this.route("dogs");
})
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('about');
}
});
App.AnimalsIndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('animals.cats');
}
});
App.AnimalsCatsRoute = Ember.Route.extend({
setupController: function(controller, model) {
// BUG: this controller object has no connectOutlet method
// (uncomment to see this yourself)
// controller.connectOutlet('animal_mixin');
}
});
App.initialize();
</script>
</html>
<script type="text/x-handlebars" data-template-name="application">
{{outlet header}}
{{outlet body}}
{{outlet navBar}}
</script>
events: {
showModal: function(){
this.render('modal', {
into: 'index',
outlet: 'modalOutlet',
controller: this.controllerFor('modal')
});
}
}