Question

在学习Ember.js时，我似乎陷入困境。

我可能会大大滥用这些组件，或者我错过了一些小事 - 无论哪种方式，请帮忙！

这就是我想要的：

用于过滤我所拥有的系统表的输入框
我希望输入是它自己的组件，而不是将它与表连接。如果桌子在组件内部，我觉得这会更容易吗？如果可能的话，我喜欢将它们分离的想法。
我还使用其他自定义组件对数据进行排序（因此我使用arrangedContent代替模型的原因）

我有3个问题：

输入的值似乎没有正确绑定到我的控制器 - 即当我在输入框中输入内容时，它似乎没有反映在控制器filterString值
因为过滤和设置列表是在输入的keyPress后面完成的，所以最初表是空的。在按下某个键之前，我该如何填充表呢？
对this.set('filteredItems', items)的调用并不反映对表格的更改。我尝试使用propertyWillChange和propertyDidChange，但仍然没有运气。
（可选）理想情况下，组件中也包含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'));
  },
});

控制台输出进入输入框

"-------------"
"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 fiddle！

我希望这能解决你的问题。

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

1 个答案: