使用ember.js的多个出口 - 我做错了什么?

时间:2013-08-20 13:33:34

标签: javascript ember.js

我只是查看了ember.js(rc7)并尝试构建一个包含多个出口的示例。

的index.html

<html>
    // ... head and other meta definitions
    <body>
        <script type="text/x-handlebars" data-template-name="index">
            <p>Hello Index!</p>
        </script>

        <script type="text/x-handlebars" data-template-name="products">
            {{outlet header}}

            <p>Hello Products 22!</p>

            {{outlet footer}}
        </script>

        <script type="text/x-handlebars" data-template-name="header">
            <p>Header</p>
        </script>

        <script type="text/x-handlebars" data-template-name="footer">
            <p>Footer</p>
        </script>

        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

        <script type="text/javascript" src="js/handlebars.js/handlebars-1.0.0.js"></script>
        <script type="text/javascript" src="js/ember.js/ember-1.0.0-rc.7.js"></script>

        <script type="text/javascript" src="js/application.js"></script>
    </body>
</html>

的application.js

window.App = Ember.Application.create();

App.Router.map(function () {
    this.resource('products');
});

App.ProductsRoute = Ember.Route.extend({
    renderTemplate: function () {
        this.render('header', {
            outlet: 'header',
            into: 'products'
        });

        this.render('footer', {
            outlet: 'footer',
            into: 'products'
        });
    }
});

不幸的是,在运行此代码时,javascript控制台会从ember.js中输出错误:加载路径时出错:TypeError {}。

来自Google控制台的Stacktrace:

DEBUG: ------------------------------- ember-1.0.0-rc.7.js:364
DEBUG: Ember.VERSION : 1.0.0-rc.7 ember-1.0.0-rc.7.js:364
DEBUG: Handlebars.VERSION : 1.0.0 ember-1.0.0-rc.7.js:364
DEBUG: jQuery.VERSION : 1.10.0 ember-1.0.0-rc.7.js:364
DEBUG: ------------------------------- ember-1.0.0-rc.7.js:364
Error while loading route: TypeError {} ember-1.0.0-rc.7.js:364
(anonymous function) ember-1.0.0-rc.7.js:364
Ember.Router.reopenClass._defaultErrorHandler ember-1.0.0-rc.7.js:26567
trigger ember-1.0.0-rc.7.js:25709
handlerEnteredOrUpdated ember-1.0.0-rc.7.js:25591
handler ember-1.0.0-rc.7.js:25566
eachHandler ember-1.0.0-rc.7.js:25613
setupContexts ember-1.0.0-rc.7.js:25565
finalizeTransition ember-1.0.0-rc.7.js:25886
transitionSuccess ember-1.0.0-rc.7.js:25781
invokeCallback ember-1.0.0-rc.7.js:7271
Promise.then ember-1.0.0-rc.7.js:7321
EventTarget.trigger ember-1.0.0-rc.7.js:7094
config.async.promise.trigger.detail ember-1.0.0-rc.7.js:7384
DeferredActionQueues.flush ember-1.0.0-rc.7.js:4744
Backburner.end ember-1.0.0-rc.7.js:4830
Backburner.run ember-1.0.0-rc.7.js:4869
Ember.run ember-1.0.0-rc.7.js:5200
Ember.Application.Ember.Namespace.extend.scheduleInitialize ember-1.0.0-rc.7.js:29937
x.Callbacks.c jquery.js:3064
x.Callbacks.p.fireWith jquery.js:3176
x.extend.ready jquery.js:433
q jquery.js:104

我很确定我搞砸了什么,所以任何提示都会受到赞赏。谢谢!

亨利

4 个答案:

答案 0 :(得分:2)

我想您必须在super中添加对renderTemplate的调用,否则系列模板将无法渲染,您想要渲染到其中: - )

App.ProductsRoute = Ember.Route.extend({
    renderTemplate: function (controller, context) {
        this._super(controller, context);
        this.render('header', {
            outlet: 'header',
            into: 'products'
        });

        this.render('footer', {
            outlet: 'footer',
            into: 'products'
        });
    }
});

答案 1 :(得分:1)

我认为 mavilein 提供了解决方案。

这里的问题是我们没有在一开始就渲染父模板。

我们也可以做到以下几点。

App.ProductsRoute = Ember.Route.extend({
renderTemplate: function () {
    this.render('products');
    this.render('header', {
        outlet: 'header',
        into: 'products'
    });

    this.render('footer', {
        outlet: 'footer',
        into: 'products'
    });
}
});

答案 2 :(得分:0)

跳出来的一件事是你错过了应用程序模板,这是应用程序的主要布局。不确定它是否会修复错误,但它可能就是这样:

<script type="text/x-handlebars" data-template-name="application">
  {{outlet}}
</script>

答案 3 :(得分:0)

对于所有答案,有一件事要添加难度,在您的路由器地图中,您必须定义products路线位于/,因为它接缝您不关心索引模板:

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

查看演示here

希望它有所帮助。