绑定输入框值并传递给组件

Question

好像我在学习Ember.js的时候被困住了。

这可能是我极大地滥用了组件，或者我遗漏了一些小东西--不管是哪种方式，请帮助我！

以下是我想要的：

• 一个输入框，用于过滤我所拥有的系统表。
• 我希望输入是它自己的组件，而不是将它与表耦合。我觉得如果表在组件内，这会容易得多？如果可能的话，我喜欢让它们脱钩的想法。
• 我还使用另一个自定义组件对数据进行排序(因此我使用的是arrangedContent而不是模型)

我有三个问题：

1. 输入的值似乎没有正确地绑定到我的控制器--也就是说，当我在输入框中键入某些内容时，它似乎没有反映在控制器filterString值中。
2. 因为筛选和设置列表是在输入的keyPress后面完成的，所以表最初是空的。在按下键之前，我该如何填充表？
3. 对this.set('filteredItems', items)的调用没有反映对表的更改。我试过使用propertyWillChange和propertyDidChange，但仍然没有成功。
4. (可选)理想情况下，filterString和filteredItems也包含在组件中是很好的，但我怀疑这是不可能的。我想的更多是为了便于携带。

以下是jsbin：http://emberjs.jsbin.com/qicuq/1/edit

模板

<script type="text/x-handlebars" data-template-name="components/filter-input">
  {{input type="search" placeholder="Filter..." value=value}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  {{filter-input value=filterString}}
  <br/>
  <table border=1>
    <tr>
      <th>System Name</th>
      <th>Owner</th>
    </tr>
    {{#each item in filteredItems}}
      <tr>
        <td>{{item.name}}</td>
        <td>{{item.owner.username}}</td>
      </tr>
    {{/each}}
  </table>
</script>

js

App.IndexController = Ember.ArrayController.extend({
  filterableProperties: ['name', 'owner.username'],
  filteredItems: [],
  filterString: null,
});

App.FilterInputComponent = Ember.Component.extend({
  arrangedContentBinding: 'controller.arrangedContent',
  filterStringBinding: 'controller.filterString',
  filteredItemsBinding: 'controller.filteredItems',
  filterablePropertiesBinding: 'controller.filterableProperties',

  keyPress: function() {
    var items = this.get('arrangedContent');

    console.log('-------------');
    console.log('items ' + items);
    console.log('value ' + this.get('value'));
    console.log('filterString ' + this.get('filterString'));
    console.log('valueBinding ' + this.get('valueBinding'));
    console.log('filterableProperties ' + this.get('filterableProperties'));

    // filter 'items' here by the value of 'filter-input' and whether or not the property is in the filterableProperties list

    console.log('filteredItems-before ' + this.get('filteredItems'));
    //this.propertyWillChange('filteredItems');
    this.set('filteredItems', items);
    //this.propertyDidChange('filteredItems');
    console.log('filteredItems-after ' + this.get('filteredItems'));
  },
});

在输入框中键入'a‘时，控制台输出

"-------------"
"items [object Object],[object Object]"
"filterString null"
"value null"
"valueBinding Ember.Binding<ember274>(_parentView.context.filterString -> value)"
"filterableProperties name,owner.username"
"filteredItems-before "
"filteredItems-after [object Object],[object Object]"

谢谢各位，任何帮助都会很感激的。

Answer 1

通过以下修改，我能够让搜索为您工作：

App.IndexController = Ember.ArrayController.extend({   
  filteredItems: function() {
    var content = this.get("content");
    var filterString = this.get("filterString");
    if (filterString) {
      return content.filter(function(item) {
        return item.name.indexOf(filterString) === 0;
      });
    } else {
      return content;
    } 
  }.property("filterString"),
  filterString: null
});

App.FilterInputComponent = Ember.Component.extend({
  filterStringBinding: 'controller.filterString',    
  keyUp: function() {
    this.set("filterString", this.get("value"));
  }
});

这是JsBin小提琴！

我希望这能回答你的问题。