web-dev-qa-db-ja.com

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';]。

これは、angularJSで次のように可能です。

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

アウレリアでも同様のことが可能ですか？

また、コレクション/配列をaureliaの_repeat.for_でフィルタリングする方法（_ng-repeat_と同様）を知りたいです。同様の方法でフィルター機能を使用しようとしましたが、それも機能せず、同様のエラーが発生しました。

javascriptarraysangularjsaureliamvw
14
Sayan Pal

少し恥ずかしいです。しかし、少し調べた後（事前に行うべきだった：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>

27
Sayan Pal