4

我对 Ember 很陌生，并试图为 EmberJS 中的项目数组编写一个简单的搜索/过滤器，但它似乎比看起来更难。我在这里发现了一个类似的问题，但我似乎无法将搜索输入绑定到该函数。我的例子是 EmberJS 网站上的默认 Todo 应用程序。

<script type="text/x-handlebars" data-template-name="todos">
{{input type="text" id="search-todo" placeholder="Search Todo List..." value=searchTerm}}
.....
</script>

在我的App.TodosController我有

searchResult: function(){
    var searchTerm = this.get('searchTerm');
    if(!searchTerm.trim()){return;}
    var regExp = new RegExp(searchTerm);
    return this.get('content').filter(function(item){
        return regExp.test(item.get('title'));
    });
}.property('searchTerm','@each.title')

但是当我打字时，什么也没有发生。我试图将其添加searchResult到actions控制器的哈希中，当我添加action= searchResult到脚本标签时，我看到该函数被调用，但我什么也没发生。基本上，我只想要一个简单的列表过滤，比如 AngularJS，我希望它不仅结束title而且所有内容，如果它必须在单独的路由中，我不需要它是单独的路由路线，我仍然不知道如何做到这一点。

http://jsbin.com/AViZATE/20/edit

谢谢你的帮助。

4

2 回答 2

4

我能够通过添加observes关键字来解决它。

这是解决方案的链接http://jsbin.com/AViZATE/37

searchResult: function(){
        var searchTerm = this.get('searchTerm');
        var regExp = new RegExp(searchTerm,'i');
        this.get('model').set('content',this.store.filter('todo',function(item){
            return regExp.test(item.get('title'));
        }));
    }.observes('searchTerm')

在 HTML 中我有

{{input type="text" id="search-todo" placeholder="Search Todo List..." value=searchTerm}}
于 2013-09-16T20:04:10.893 回答
0

执行此操作的“Ember 方式”是创建一个自定义视图，该视图监听 keyUp 事件（或任何其他事件）并将搜索词发送到控制器的函数：

Todos.SearchTodoView = Ember.TextField.extend({
 keyUp: function(event){
  this.get('controller').send('searchResult', this.value);
 }                                       
});

出于某种原因，当我尝试从视图访问控制器时，我无法让它在您的udpated fiddle上工作，它会返回视图本身。但我知道它有效，因为我在自己的应用程序中使用它。

于 2013-09-16T20:21:22.320 回答