一个视图中的 Ember 事件会更新另一个视图吗？

Question

我有一小段来自我的 Ember 应用程序的摘录。我的页面包含许多视图，每个视图都包含不同的数据，每个视图都有自己的控制器。

我想要一个搜索字段（在索引视图中）进入一个视图，该视图应该与 stationList 控制器“对话”以更新 stationList 视图的内容。这行不通。我收到一个错误：TypeError: this.get(...).search is not a function

日志输出我要求它使用的控制器的名称：App.StationListController

我在 StationList 视图中添加了第二个搜索表单。这个工作得很好。这次的日志记录输出了 StationListController 对象的转储。所以我猜测其他搜索表单，尽管我的代码（在 SearchFormView 中）：controllerBinding : 'App.StationListController'，没有正确设置控制器。

所以我想我的问题是为什么不？

如何在一个视图的表单字段上路由更改以调用另一个视图控制器上的功能？

这是我的代码：

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <div id="searchForm">search form view search: 
        {{#view App.SearchFormView}}
            {{view App.StationSearchField}}
        {{/view}}
    </div>

    <div id="stationList">{{render stationList}}</div>
</script>

<script type="text/x-handlebars" data-template-name="stationList">
    station list view search: {{view App.StationSearchField}}
    <ul>
        <li>List</li>
        <li>will</li>
        <li>go</li>
        <li>here</li>
    </ul>
    {{searchTerm}}
</script>

和

App = Ember.Application.create({})

App.SearchFormView = Ember.View.extend({
    init : function()
    {
        console.log("SearchFormView init", this.get('controller'))
    }
})

App.StationSearchField = Ember.TextField.extend({
    keyUp: function(event) {
        var searchTerm = this.value

        console.log("value",searchTerm,this.get('controller'))

        this.get('controller').search(searchTerm)
    }
})

App.StationListController = Ember.ArrayController.extend({
    content     : [],
    searchTerm  : null,

    search : function(term)
    {
        this.set("searchTerm",term)
        console.log("searching",term)
    }
});

小提琴：http://jsfiddle.net/ianbale/8QbrK/14/

Answer 1

我认为controllerBinding 的东西来自旧版本，我认为它不再有效。

您可以在StationSearchField 中的get('controller') 上使用controllerFor。

    this.get('controller').controllerFor('station_list').search(searchTerm)

但controllerFor 已被弃用，可能会被删除。根据您的应用程序结构，您在控制器上使用needs。

我使用的另一种方法是从视图发送自定义事件，然后路由将其发送到相应的控制器。

App.IndexRoute = Ember.Route.extend({
    events: {
      search: function(term) {
        controller = this.controllerFor('station_list')
        controller.search(term);
      }
    }
});

并像这样从视图中分派搜索事件。

    this.get('controller').send('search', searchTerm);

这种方法的优点是你从多个地方分派同一个事件，它会以同样的方式得到处理。

这是更新后的jsfiddle。