EmberJS 在用户键入时过滤项目数组

EmberJS filter array of items as the user types

本文关键字：过滤 项目 项目数 数组 用户 EmberJS      更新时间：2023-09-26

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

<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

感谢您的帮助。

我能够通过添加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}}

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

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

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

相关文章：