Question

我目前有一个组件有几个组件。一个是显示我的所有表视图数据的组件，在该组件内部是另一个显示搜索字段的组件。他们看起来像这样：

{{#table-display model=model}}

    <table class="data-table">
       <thead>
         <tr>
           <th>Status</th>
           <th>Name</th>
           <th>Email Address</th>
         </tr>
       </thead>
       <tbody>
       {{#each filteredModel as |contact| }}
         {{#link-to 'contacts.edit' contact tagName="tr"}}
           <td>{{ current-status model=contact }}</td>
           <td>{{ contact.name }}</td>
           <td><em>{{ contact.name }}</em></td>
           <td><em>{{ contact.email }}</em></td>
         {{/link-to}}
       {{/each}}
       </tbody>
     </table>

{{/table-display}}

然后在table-display组件内部，我有我的搜索过滤器输入。

{{input value=filterString placeholder="Search Contacts" }}

如果我将表放入table-display组件，则表过滤有效，但如果它只是在组件内，则不行。我在这里做错了什么？

Answer 1

有几种方法可以让fitleredModel数据流出组件，惯用的方法是使用HTMLBars阻止的params。

内部表格显示模板：

...
{{input value=filterString placeholder="Search Contacts" }}
...
{{yield filteredModel}}

然后在你的主模板中：

{{#table-display model=model as |filteredModel|}}
   ...
   {{#each filteredModel as |contact|}}
   ...
   {{/each}}
{{/table-display}}

将数据传递回组件

1 个答案: