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 的控制器集合中。然后，您可以在索引模板中指定 a controllerBinding，如下所示。

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

更详细的解释可以在这里找到管理控制器之间的依赖关系和这里darthdeus vs Ember.js: Controller's Needs Explained

于 2013-03-25T12:59:15.737 回答