1

鉴于以下观点：

<script type="text/x-handlebars">
    <article>{{outlet "foo"}}</article>
    <aside>{{outlet}}</aside>
</script>


<script type="text/x-handlebars" data-template-name="base/index">
    <h2>Base</h2>
    {{view Ember.Select
        contentBinding=model
        optionValuePath="content.id" optionLabelPath="content.name"
        prompt="Select a child"
        valueBinding="selectedChild"}}

    <div id="child">
      <p>I want the child rendering here</p>
      {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="foo">
    <h2>Foo</h2>
</script>

<script type="text/x-handlebars" data-template-name="child">
    <h2>Child</h2>
    <p>Child: {{id}} {{name}}</p>
    <pre>{{controller}}</pre>
</script>

这个应用程序：

var App = Ember.Application.create({
    LOG_TRANSITIONS: true,
    LOG_ACTIVE_GENERATION: true,
    LOG_VIEW_LOOKUPS: true
});

App.Router.map(function() {
    this.resource('base', function() {
        this.resource('child', {path: ':child_id'});
    });
});

App.IndexRoute = Ember.Route.extend({
    beforeModel: function() {
        this.transitionTo('base');
    }
});

App.BaseRoute = Ember.Route.extend({ 
    renderTemplate: function() {
        this.render('foo', {into: 'application', outlet: 'foo'});
    }
});

App.BaseIndexRoute = Ember.Route.extend({
    model: function() {
        return children;
    }
});

App.ChildController = Ember.ObjectController.extend();

App.BaseIndexController = Ember.ObjectController.extend({ 
    selectedChild: null,

    selectedChildChanged: function() {
        var id = this.get('selectedChild');
        this.transitionToRoute('child', id);
    }.observes('selectedChild')

});

App.ChildRoute = Ember.Route.extend({
    model: function(params) {
        return children[params.child_id - 1];
    }
});

var children = [
    {id: 1, name: 'Foo Goggins'},
    {id: 2, name: 'Bar McFudger'},
    {id: 3, name: 'Gia Goggins-McFudger'}
];

我期望子视图被渲染到{{outlet}}内部，div#child但它会渲染到主应用程序出口。

您可以在这里看到一个工作示例http://jsbin.com/docuj/10/edit

4

1 回答 1

1

该index路线是您资源下的实际路线，如果您导航更深，则该索引路线将替换为更深路线的资源。您需要将其从资源路由本身移至index资源路由本身。

App.BaseRoute = Ember.Route.extend({ 
  model: function() {
    return children;
  },
  renderTemplate: function() {
    this._super();

    this.render('foo', {into: 'application', outlet: 'foo'});
  }
});


App.BaseController = Ember.ObjectController.extend({ 
  selectedChild: null,

  selectedChildChanged: function() {
    var id = this.get('selectedChild');
    this.transitionToRoute('child', id);
  }.observes('selectedChild')

});

示例：http: //jsbin.com/vilimete/1/edit

让我们尝试清除它，在资源下您可以拥有资源或路线。路线下面不能有任何东西，它们是一条死胡同。在这种特殊情况下，您没有定义基本资源或模板。Ember 很友善，并假设您想要一个包含此内容的基本模板，{{outlet}}然后它将基本索引路由渲染到该插座中。当您切换到子资源时，它会在基本插座中呈现子资源。

这是一个可能描绘正在发生的事情的例子。 http://jsbin.com/xiqajawa/1/edit

于 2014-07-08T19:50:13.820 回答