Question

我正在学习ember.js而且我遇到了一个非常基本的问题：我找不到使用outlet在另一个模板中渲染模板的方法。这些是我的文件：

application.handlebar

<div class='navbar navbar-inverse navbar-fixed-top' role='navigation'>
    <div class='navbar-inner'>
        <div class='container'>
            <a class="brand" href="#">App</a>
            <div class='nav-collapse collapse'>
                <ul class='nav'>
                    <li>{{#linkTo 'application'}}Home{{/linkTo}}</li>
                    <li>{{#linkTo 'posts'}}Posts{{/linkTo}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class='container' id='main'>
    <div class='content'>
        <div class='row'>
            <div class='span12'>
                <div class='page-header'></div>
                {{outlet}}
            </div>
        </div>
    </div>
</div>
</div>

posts.handlebars：

    <ul>
{{#each controller}}
  <li>
  {{title}}
  </li>
{{/each}}
</ul>

posts_routes：

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

       return App.Post.find();
    }
});

router.js：

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

以下是发生的情况：当我加载应用程序时，页面当前显示有导航栏和空白页。单击“帖子”链接会显示帖子模板，但导航会消失，就像帖子模板替换了整个“应用程序”模板一样。你能帮我弄清楚为什么会这样吗？

Answer 1

内部余烬使用ApplicationRoute，我认为使用this.route('application',{ path: '/' });会导致冲突。

所以只需删除this.route('application',{ path: '/' });即可。所有内容都可以。

如果您需要主页/初始页面，则可以创建index.handlebars模板，因为ember会自动创建this.route('index',{ path: '/' });。并将linkTo 'application'更改为linkTo 'index'，以获得预期的行为。

请仔细看看这个工作http://jsfiddle.net/marciojunior/HpmwB/

Ember.js插座不能正常工作

1 个答案: