3

ルートから自動的にレンダリングされるテンプレートがあります。ハンドルバーテンプレートは子ビューを指定します。

子ビューには、使用するコントローラーを指定する拡張ビューがjsにあります。また、イベントを発生させるクリックハンドラーもあります。コントローラがイベントを処理します。

その時点まで、これは機能します-問題は、コントローラーが呼び出しを試みることです...

this.transitionToRoute("about")

そして、何らかの理由でそれは機能しません。

また、メインビューでクリックイベントを処理し、そのコントローラーでまったく同じメソッドを使用しますが、これは機能します。 では、違いは何ですか？代わりに、移行を処理するために何ができますか？

例： http： //jsfiddle.net/b6xsk/4/

この例では、インデックスのクリックは機能しますが、子ビューのクリックは機能しないことがわかります。

以下のコードはフィドルと一致します。

私のテンプレート...

<script type="text/x-handlebars">
    {{#linkTo "index"}}Index{{/linkTo}}
    {{#linkTo "about"}}About{{/linkTo}}
  <div class="app-template">
    {{outlet}}
  </div>
</script>

<script type="text/x-handlebars" data-template-name="index">
    <h1>Index (click me)</h1>
    {{view App.ChildView}}
</script>

<script type="text/x-handlebars" data-template-name="about">
    <h1>About</h1>
</script>

<script type="text/x-handlebars" data-template-name="childview">
    <h2>Child View (click me)</h2>
</script>

そして私のJS...

App = Ember.Application.create();

// two simple routes
App.Router.map(function() {
  this.route("index");
  this.route("about");
});

// index controller handles event and moves to about route
App.IndexController = Ember.Controller.extend({
    useraction: function(event) {
        console.log("User Action");
        this.transitionToRoute("about"); // works !
    }
});

// index view handles the click and raises event (handled by controller)
App.IndexView = Ember.View.extend({
    click: function(event) {
        this.get('controller').send('useraction', event);        
    }
});

// handles child event and tries (but fails) to transition to about route
App.ChildViewController = Ember.Controller.extend({
    childuseraction: function(event) {
        console.log("Child User Action");

        // do some validation or other code and maybe then transition 
        // in this example always transition

        this.transitionToRoute("about"); // doesn't work !  why??

        event.stopPropagation(); // don't allow the event to bubble
    }
});

// instantiated so we can attach to view below
App.childViewController = App.ChildViewController.create();

// child view is added in the index handlebar template and raises 
// event on click that is handled by child view controller
App.ChildView = Ember.View.extend({
    templateName: 'childview',
    controller: App.childViewController,
    click: function(event) {
        this.get('controller').send('childuseraction', event);
    }
});
4

1 に答える 1

4

違いは、indexControllerにはアプリケーションルーターへの参照がありますが、作成したchildViewControllerにはそのルーターへの参照がありません。Emberにコントローラーを作成してもらう必要があります。これは、次のように実行できます。

ChildViewでchildControllerの作成とコントローラーの仕様を削除します。

以下を追加してくださいIndexController

needs: ['childView'] // Can be a string if you only need one other controller

これにより、Emberがコントローラーを作成し、indexControllerのコントローラーコレクションに追加します。controllerBinding次に、インデックステンプレートで次のようにを指定できます。

{{view App.ChildView controllerBinding="controllers.childView"}}

より詳細な説明は、ここで見つけることができますコントローラー間の依存関係の管理とここでdarthdeusとEmber.js：コントローラーのニーズの説明

于 2013-03-25T12:59:15.737 に答える