0

我有以下 js，基于 emberjs.com 路由教程。var 'wontAppear' 不会映射到相应的视图中。

Quiz = Em.Application.create({
ApplicationView: Ember.View.extend({
    templateName: 'App'
}),
IntroSettings : Ember.Object.extend(),
ApplicationController: Ember.Controller.extend({
    titlebar: 'My New App',
}),

IntroView: Ember.View.extend({
    templateName: 'Intro'
}),
IntroController: Em.ObjectController.extend({ house: "2" }),

CountDownView: Ember.View.extend({
    templateName: 'CountDown',
    didInsertElement: function () {
        this.$().hide().show('drop', { direction: "right" }, 200);
    },
}),
CountDownController: Em.ObjectController.extend({

}),

Router: Em.Router.extend({
    enableLogging: true,
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('body','Intro');
            },
            countDown: Ember.Route.transitionTo('countDown')
        }),
        countDown: Ember.Route.extend({
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('body', 'CountDown',     { wontAppear: "5" });
            }
        })
    })
})
});


Quiz.initialize();

视图是这样设置的：

    <script type="text/x-handlebars"  data-template-name="App">
    <div id="quiz-container">
        <div id="headerPanel">
            <div class="title">{{titlebar}}</div>
            <div class="timerDiv"> </div>
            <div class="timerDivText"></div>
        </div>
        {{outlet body}}
    </div>
</script>
<script type="text/x-handlebars" data-template-name="Intro">
    <div id="introPanel">
        <img id="helpimg" src="images/helpimage.jpg" />
        <button id="startButton" {{action "countDown" on="click"}}>Start Game</button>
    </div>
</script>

<script  type="text/x-handlebars" data-template-name="CountDown">
    <div class="countdown">
        {{wontAppear}}
    </div>
</script>

我可以让数据出现在视图中的唯一方法是将其添加到应用程序控制器。我认为倒计时视图会从它对应的 countdownController 中获取数据？

4

1 回答 1

2

我认为您（以及您在底漆中阅读的示例）在 Application 命名空间中缺少一个新添加的属性。

Ember 现在会自动启动应用程序，因此您不需要调用App.initialize()（Quiz.initialize()在您的情况下），但是，如果您愿意/需要，您可以将autoinit应用程序的设置为false，您不会有任何问题打电话App.initialize()。如果不设置为false并调用initialize，Ember会抛出异常说不能多次调用initialize。

另一件事，当你使用任何框架时，命名/大小写约定很重要，它与 Ember 没有什么不同，所以你connectOutlet应该是这样的：

// ... other code
// note that "countDown" starts with a lower cased "c"
router.get('applicationController')
      .connectOutlet(
          'body', /* outlet name*/
          'countDown', /* view/controller pair name in cammelCase */
          { wontAppear: "5" } /* your context object*/
      );
// ... other code

你的应用仍然会抛出一个错误：

未捕获的类型错误：对象# 的属性“#”不是函数

但我不确定那是什么，我只是想通过调用connectOutlet你的countDown路线来解决这个特定问题。

看这个例子的小提琴

于 2012-11-19T19:56:43.940 回答