0

emberjs.comルーティングチュートリアルに基づいて、次のjsがあります。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に設定せずに初期化を呼び出すと、Emberは、初期化を複数回呼び出すことはできないという例外をスローします。

もう1つ、命名規則や大文字小文字の区別は、Frameworkを使用しているときに重要です。これは、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

アプリは引き続きエラーをスローします：

Uncaught TypeError：オブジェクト＃のプロパティ'＃'は関数ではありません

しかし、それが何であるかはわかりません。私はconnectOutletあなたのcountDownルートでの呼び出しでこの特定の問題を解決しようとしていました。

この例のフィドルを参照してください

于 2012-11-19T19:56:43.940 に答える