Question

我对Ember很新，并试图在EmberJS中为一系列项目编写一个简单的搜索/过滤器，但它似乎比看起来更难。我发现了一个类似的question here，但我似乎无法将搜索输入绑定到该函数。我的例子是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添加到脚本标记时，我看到函数被调用，但我没有任何反应。基本上，我只想要一个简单的filtering of the list like AngularJS，我希望它不仅仅是title而是所有内容，而且我不需要它是一个单独的路线，如果它必须在一个单独的路线，我仍然不知道如何做到这一点。

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

感谢您的帮助。

Answer 1

我可以通过添加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}}

Answer 2

执行此操作的“Ember方式”是创建一个自定义视图，用于侦听keyUp事件（或any other event）并将搜索项发送到控制器的函数：

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

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

EmberJS过滤器项目数组作为用户类型

2 个答案: