如何实现搜索框?

时间:2014-12-24 02:44:57

标签: ember.js ember-data ember-cli

这是我到目前为止所拥有的。搜索输入字段在hbs模板中呈现得很好。但是当我开始输入它时,没有任何反应。我错过了什么?任何指针都会受到赞赏。

// ui/app/routes/application.js
import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
      orders: this.store.find('order'),
      products: this.store.find('product', { status: 'available' })
    });
  },
});

// ui/app/controllers/application.js
import Ember from 'ember';

export default Ember.ObjectController.extend({
  products: function() {
    console.log('adf');
    if (this.get('search')) {
      return this.get('searchedProducts');
    } else {
      return this.get('products');
    }
  }.property('search', 'searchedProducts'),

  searchedProducts: function() {
    var search = this.get('products').toLowerCase();

    return this.filter(function(product) {
      return product.get('name').toLowerCase().indexOf(search) !== -1;
    });
  }.property('search', 'products.@each.name'),
});


// ui/app/templates/application.js
<br />{{input type="text" value="search" placeholder="search" class="search"}}

{{outlet}}

2 个答案:

答案 0 :(得分:3)

{{input type="text" value="search" placeholder="search" class="search"}}

表示您将字符串值'search'分配给某个文本字段。那不是你想要的。你想要的是将search属性绑定到文本字段中输入的内容,如下所示:

{{input type="text" value=search placeholder="search" class="search"}}

看到区别?

答案 1 :(得分:0)

您确定脚本中的某个关键字products没有问题吗?

products: function() {
    console.log('adf');
    if (this.get('search')) {
      return this.get('searchedProducts');
    } else {
      return this.get('products'); //returns the computed property value itself right ?
    }
  }.property('search', 'searchedProducts'),

this.get('model.products')在“products”计算属性和searchProduct中我认为