Блог

Этот вопрос исходит из нашего Угольного Раздора

У меня есть что-то вроде этого

 {{#each @data as |project|}}
  <ItemList @categories={{project.category}}/>
{{/each}}

 

Я вызываю действие где-то в другом месте, затем фильтрую данные@, и я хотел бы сбросить это each @data .

Я хочу назначить отфильтрованный результат @data данным, переданным из родительского компонента в этот

В том же компоненте у меня есть кнопка

 <li 
  class="inline hover:underline cursor-pointer ml-4" 
  {{on "click" (fn this.changeProject project.name @data)}}
>
  {{project.name}}
</li>
 

и changeProject действие фильтрует @данные, которые я хотел бы
, например, присвоить #каждому- this.data = filteredModel; не работает.

Предполагая ваше действие, changeProject выглядит примерно так:

 @action
changeProject(projectName, data) {
  this.data = data.filter(project => project.name.includes(projectName));
}
 

наблюдение, которое this.data не работает , является правильным и намеренным, как @data это доступно по адресу this.args.data , но каждый включенный ключ this.args неизменен.

итак, в вашем компоненте, чтобы ссылаться на отфильтрованные данные, возможно, вы захотите создать псевдоним:

 get filteredData() {
  return this.args.data;
}
 

и в вашем шаблоне:

 {{#each this.filteredData as |project|}}
  ...
 

и тогда ваше действие также потребуется обновить, потому что мы все еще не можем установить filteredData или this.args.data

 import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class Demo extends Component {
  @tracked filtered;

  get filteredData() {
    return this.filtered ?? this.args.data;
  }

  @action
  changeProject(projectName) {
    this.filtered = this.args.data.filter(project => project.name.includes(projectName));
  }
}
 

 {{#each this.filteredData as |project|}}
  <ItemList @categories={{project.category}}/>
{{/each}}

...
<ul>
  {{#each @data as |project}}
    <li 
      class="inline hover:underline cursor-pointer ml-4" 
      {{on "click" (fn this.changeProject project.name)}}
    >
      {{project.name}}
    </li>
  {{/each}}
</ul>