Question

我正在尝试使用Ember.js组合一个应用程序

在此处找到jsfiddle：http://jsfiddle.net/wprk14/ARbMa/

我认为我的路由/页面/模板有效，但我无法显示导航。我想我需要添加另一个导航插座，但文档并没有真正帮助我理解我需要做什么。

相关HTML

<div id="wrapper">
    <div id="main-content">
        <script type="text/x-handlebars">
            {{outlet}}
        </script>
    </div>
</div>
<footer>
    {{outlet nav}}
</footer>

<script type="text/x-handlebars" data-template-name="nav">
    <ul id="tab-bar">
        <li>{{#linkTo "messages.inbound"}}Inbox{{/linkTo}}</li>
        <li>{{#linkTo "messages.outbound"}}Sentbox{{/linkTo}}</li>
        <li>{{#linkTo "parking"}}Parking{{/linkTo}}</li>
        <li>{{#linkTo "fuel"}}Fuel Tracker{{/linkTo}}</li>
    </ul>
</script>

相关JS

App.Router.map(function() {
this.route("login");
this.resource('messages', function() {
    this.route('inbound');
    this.route('outbound');
});
this.route("parking");
this.route("fuel", { path: '/fuel-tracker' });
});

Answer 1

您应该添加{{render nav}}而不是{{outlet nav}}来渲染所有网页上的导航栏，无论当前插座内有什么内容。

一页上有多个插座

1 个答案: