一个视图中的Ember事件更新另一个?

时间:2013-06-26 08:33:16

标签: events view controller ember.js

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

我希望搜索字段(在索引视图中)进入一个视图,该视图应与“站点列表”控制器“对话”以更新站列表视图的内容。这不起作用。我收到一个错误:TypeError:this.get(...)。search不是函数

日志记录输出我要求它使用的控制器的名称: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/

1 个答案:

答案 0 :(得分:0)

我认为controllerBinding内容来自旧版本,我认为不再适用。

您可以在controllerFor的{​​{1}}上使用get('controller')

StationSearchField

this.get('controller').controllerFor('station_list').search(searchTerm) 已被弃用,可能会被删除。根据您的应用程序结构,您可以在控制器上使用needs

我使用的另一种方法是从View发送一个自定义事件,然后路由发送到相应的控制器。

controllerFor

并从视图中调度搜索事件。

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

此方法的优点是您可以从多个位置调度相同的事件,并以相同的方式处理它。

这是更新的jsfiddle