Наблюдение за массивами в Аурелии - PullRequest
Новая
       24

Наблюдение за массивами в Аурелии

0 голосов
/ 11 октября 2018

У меня есть свойство в моем классе: 

class Control {
    @bindable households;

    get people() {
        return households
            .map(household => househould.people)
            .reduce((g1, g2) => g1.concat(g2), []);
    }
}

, которое я использую для вычисления коллекции всех people[] во всех домохозяйствах, которое затем отображается здесь: 

<ul>
    <li repeat.for="person of people">
        ${person.firstName} ${person.lastName} - ${person.phone}
    </li>
</ul>

Мне нужно, чтобы список обновлялся всякий раз, когда люди добавляются в домашнее хозяйство, ИЛИ, если обновляется какое-либо из представленных свойств, firstName, lastName, phone, для любого элемента в вычисляемой коллекции.Как я могу сделать это в Аурелии?Если я использую @computedFrom(), он не будет обнаруживать изменения в элементах массива, и поскольку список людей во всех домохозяйствах является динамическим, я не могу просто создать наблюдателя для каждого элемента, не создавая систему для управления, когда наблюдатели должны быть подписаны /отписался.

Ответы [ 3 ]

0 голосов
/ 12 октября 2018

Используйте Грязную проверку

Оставьте @computedFrom(), и вы получите желаемое поведение. 

export class App {
  @bindable households;
  get people() {
    const households = this.households || []; // Make sure househoulds is defined.
    return households.reduce((people, household) => people.concat(household.people), []);
  }
}

https://gist.run/?id=040775f06aba5e955afd362ee60863aa

0 голосов
/ 14 октября 2018

Вы должны избегать dirty-checking, насколько это возможно, сигналы являются идеальным вариантом для вашего сценария.Просто имейте в виду, что если вы хотите использовать computedFrom для массива, вы можете сделать это, наблюдая, например, за его свойством length, а не dirtyChecking, например, @computedFrom("myArray.length")

0 голосов
/ 11 октября 2018

Как раз когда я собирался отказаться от возможности поиска решения для Google, Aurelia Signaling пришла на помощь .Этот код работал для меня: 

<ul>
    <li repeat.for="person of people">
        <!-- May work without this rendering method,
            this is just closer to what my actual code is doing. -->
        ${renderPersonInfo(person) & signal: 'example-signal'}
    </li>
</ul>

И класс: 

import {BindingSignaler} from 'aurelia-templating-resources';

@inject(BindingSignaler)
class Control {
    @bindable households;

    constructor(bindingSignaler) {
        this.bindingSignaler = bindingSignaler;
        //Obviously, you can have this trigger off any event
        setInterval(() => this.bindingSignaler.signal('example-signal'), 1000);
    }

    get people() {
        return households
            .map(household => househould.people)
            .reduce((g1, g2) => g1.concat(g2), []);
    }
}
...