Ember：指定出口错误 [英] Ember: Error with named outlets

问题描述

我不知道为什么我们的模板没有被渲染在指定的网点。这是我第一次学习白垩，我被困在指定的网点上。

I do not know why my templates are not being rendered in the named outlets. This is my first stab at learning ember and I am stuck on the named outlets.

我想在<$ 中呈现 sidebarTemplate c $ c> {{outletsidebar}} 和 contentTemplate 在 {{outletcontent}} 但是我在控制台中收到以下错误：处理路由时发生错误：posts无法读取未定义的属性connectOutletTypeError：无法读取未定义的connectOutlet属性

I would like to render the sidebarTemplate in the {{outlet "sidebar"}} and the contentTemplate in the {{outlet "content"}} but I keep getting the following error in the console: "Error while processing route: posts Cannot read property 'connectOutlet' of undefined TypeError: Cannot read property 'connectOutlet' of undefined"

这是我的代码的小提琴： http://jsfiddle.net/va71wwr9/

Here is a fiddle to my code: http://jsfiddle.net/va71wwr9/

这是我的HTML：

<script type="text/x-handlebars">
  <div class="nav-container">
    <ul class="nav">
        <li>{{#link-to 'home'}}Home{{/link-to}}</li>
        <li>{{#link-to 'posts'}}Posts{{/link-to}}</li>
    </ul>
  </div>

  {{outlet}}
</script>

<script type="text/x-handlebars" id="home">
  <h1>Home screen</h1>
</script>

<script type="text/x-handlebars" id="posts">
  <h1>Posts screen</h1>
  <div class="sidebar-container">
    {{outlet sidebar}}
  </div>
  <div class="content-container">
    {{outlet content}}
  </div>
</script>

<script type="text/x-handlebars" id="sidebarTemplate">
  <p>Side bar stuff</p>
</script>

<script type="text/x-handlebars" id="contentTemplate">
  <p>content stuff</p>
</script>

这是我的JavaScript：

Here is my JavaScript:

var App = Ember.Application.create();

App.Router.map(function() {
  this.resource('home', {path: '/'});
  this.resource('home', {path: 'home'});
  this.resource('posts', {path: 'posts'});
});

App.PostsRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('sidebarTemplate', {
        into: 'posts',
        outlet: 'sidebar'
    });
    this.render('contentTemplate', {
        into: 'posts',
        outlet: 'content'
    });
  }
});

推荐答案

问题是您没有呈现帖子模板。您可以在定义模板之前添加 this.render（）或 this._super（）您所在路线的出口：

The problem is that you're not rendering the posts template. You can fix this by adding this.render() or this._super() before you define the templates of the outlets of the route you are in get rendered:

App.PostsRoute = Ember.Route.extend({
    renderTemplate: function() {

        // add this line
        this._super();

        this.render('sidebarTemplate', {
            into: 'posts',
            outlet: 'sidebar'
        });
        this.render('contentTemplate', {
            into: 'posts',
            outlet: 'content'
        });
    }
});

只需一个关于扩展功能的注释;在这个特定的代码中，调用 this._super（）将在技术上与调用 this.render（） ，但不同的是通过调用 _super（）来扩展 renderTemplate 功能通过将自己的东西附加到该方法将自己做什么，在这种情况下，这将调用 this.render（），或者这个方法可能需要执行的另一个例程（一般来说，不排除 renderTemplate ），而如果您调用方法来执行您想要的事情，在这种情况下， render 方法，您将从流程中排除此方法可能执行的其他操作。这不是对或错。这真的取决于你想要实现的目标。在大多数情况下，您应该调用 this._super（），而不是重新编写实现，如果您要扩展的方法有多个事情和/或今后要多做一件事情。

Just one note on extending features; In this particular code, the call this._super() would technically be the same as calling this.render(), but the difference is that by calling _super() you are extending the renderTemplate functionality by appending your stuff to what the method would do on its own, which in this case would be call this.render() and perhaps another routine this method might need to perform (generally speaking, not exclusive to renderTemplate), while if you call the method that does the thing you want yourself, in this case the render method, you'll be excluding from the flow the other things that this method could perform. And this is not right or wrong. It really depends on what you want to achieve. For most cases you should call this._super() instead of re-writing the implementation again in the event that the method you're extending does more than one thing and/or gets to do more than one thing in the future.

这篇关于Ember：指定出口错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！