ember.js过渡到子视图和控制器内的路由

Question

我有一个从路由中自动呈现的模板。车把模板指定一个子视图。

子视图在我的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); 
    } 
}); 

Answer 1

的区别是indexController的具有应用路由器的引用，但创造了childViewController 你没有对所述路由器的引用。您应该让Ember为您创建控制器，您可以按照以下方式进行操作。

在ChildView中删除childController创建和控制器规范。

以下添加到您的IndexController

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

这将有灰烬创建控制器为你，并把它添加到indexController的的控制器集合。然后，您可以按如下方式在索引模板中指定controllerBinding。

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

更详细的解释可以在这里找到Managing dependencies between controllers这里darthdeus vs Ember.js: Controller's Needs Explained