Фильтр в виде aurelia

Я использую aurelia и хочу отфильтровать коллекцию (массив) в поле зрения, а не в модели вида.

Я пытаюсь сделать следующий синтаксис:

<div class="col-sm-7  col-md-7 col-lg-7 ${errors.filter(function(err){return err.Key==='car.Model';}).length >0? 'alert alert-danger' :''}">
            <span repeat.for="error of errors">
                <span if.bind="error.Key==='car.Model'">
                    ${error.Message}
                </span>
            </span>
</div>

И я получаю следующую ошибку в консоли браузера:

Error: Parser Error: Missing expected ) at column 28 in [errors.filter(function(err){return err.Key==='car.Model';].

Это возможно в угловом JS следующим образом:

 <div class="small-7  medium-7 large-7 columns end">
        <span class="error" ng-repeat="error in errors  | filter:{ Key: 'car.Model'}">
            <span class="error-message">
                {{error.Message}}
            </span>
        </span>
    </div>

Возможно ли подобное сходство в аурелии?

Мне также было бы интересно узнать, как сбор/массив можно фильтровать в repeat.for в aurelia (аналогично ng-repeat). Я попытался использовать функцию фильтра аналогичным образом, но это тоже не сработало, и я получил аналогичную ошибку.

Ответы

Ответ 1

Это немного неловко. Но после небольшого исследования (которое я должен был сделать заранее: P) у меня есть ответ.

Это можно сделать с помощью ValueConverter, как показано здесь: http://jdanyow.github.io/aurelia-converters-sample/.

И я думаю, это довольно круто.

Теперь мой код выглядит следующим образом:

<div class="col-sm-7  col-md-7 col-lg-7 alert alert-danger" if.bind="errors | hasPropertyValue:'Key':'car.Model'">
    <span repeat.for="error of errors | filterOnProperty:'Key':'car.Model'">
        <span>
           ${error.Message}
        </span>
    </span>
</div>

И я определил пару ценностных преобразователей в TypeScript (valueconverters.ts):

export class FilterOnPropertyValueConverter {
toView(array: {}[], property: string, exp: string) {

    if (array === undefined || array === null || property === undefined || exp === undefined) {
        return array;
    }
    return array.filter((item) => item[property].toLowerCase().indexOf(exp.toLowerCase()) > -1);
}
}

export class HasPropertyValueValueConverter {
toView(array: {}[], property: string, exp: string) {

    if (array === undefined || array === null || property === undefined || exp === undefined) {
        return false;
    }
    return array.filter((item) => item[property].toLowerCase().indexOf(exp.toLowerCase()) > -1).length > 0;
}
}

И я, наконец, импортировал их на мой взгляд: <import from="yourPath/valueconverters"></import>

Ответ 2

Хорошо узнать, как использовать Aurelia аналогичным образом. Как получить счетчик отфильтрованного списка, например, следующий angular 1 код?

<div class="small-7  medium-7 large-7 columns end">
        <span class="error" ng-repeat="error in filtered = (errors  | filter:{ Key: > 'car.Model'})">
            <span class="error-message">
                {{error.Message}}
            </span>
        </span>
    </div>
            <div class="row text-center" ng-if="errors.length>0">
                Total records: {{filtered.length}}
            </div>