1

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

索引.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>

应用程序.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

4 回答 4

2

我想您必须添加对superin的调用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'
        });
    }
});
于 2013-08-20T13:52:55.407 回答
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'
    });
}
});
于 2013-08-20T14:18:31.603 回答
0

我突然想到的一件事是您缺少应用程序模板，这是应用程序的主布局。不确定它是否会修复错误，但它可能只是这样的：

<script type="text/x-handlebars" data-template-name="application">
  {{outlet}}
</script>
于 2013-08-20T13:52:43.253 回答
0

对于所有的答案，有一点要补充一点，在您的路由器地图中，您必须定义该products路线所在的位置，/因为它接缝您根本不关心索引模板：

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

请参阅此处的演示。

希望能帮助到你。

于 2013-08-20T15:26:56.273 回答