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

似乎我在学习Ember.js时被卡住了

有可能是我严重误用了这些组件，或者是我遗漏了一些小东西——不管怎样，请帮助

以下是我想要的：

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

  arrangedContent

  而不是model）

我有三个问题：

输入值似乎没有正确绑定到我的控制器-即当我在输入框中键入某些内容时，它似乎没有反映在控制器

过滤器字符串

值中

由于过滤和设置列表是在输入上的

键后进行的，因此最初表格是空的。在按下键之前，我如何填充表格

调用

this.set（'filteredItems'，items）

不会反映对表的更改。我试着使用

propertyWillChange

和

propertyDidChange

但是仍然没有成功

（可选）理想情况下，组件中也包含

filterString

和

filteredItems

，但我怀疑这是不可能的。我想更多的是方便携带

以下是jsbin：

模板

<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>

在输入框中键入“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]"

“-------”
项目[对象]，[对象]
“filterString null”
“值为空”
“valueBinding Ember.Binding（\u parentView.context.filterString->value）”
filterableProperties名称，所有者。用户名
“之前的筛选项目”
[object]、[object]之后的filteredItems

---

谢谢大家，如果有任何帮助，我们将不胜感激。

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

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：

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"));
  }
});