Javascript 重构ValueConverter以动态过滤

我希望采用以下ValueConverter，并使其可用于许多视图

export class ProductFilterValueConverter {
    toView(array, value) {
        var regex = new RegExp(value, 'gi');
        var matcher = item =>
            item.abbr.match(regex) || item.name.match(regex);

        return array.filter(
            matcher
        );
    }
}

上面的过滤器从文本字段中获取一个值，并匹配我的“abbr”列或“name”列

重构的第一步是添加一个额外的参数，该参数可能是一个字符串数组，其中包含我希望包含在匹配或逻辑中的列

如果我像

[“zip”]

那样在数组中传入一个值，那么我只想在我的zipcode列上进行匹配，而不需要OR运算符。如果像上面的例子一样，我想在m，y产品上进行匹配，那么我的数组可能会如下所示：

[“abbr”，“name”]

此方法位于上面，或者可能定义了另一个对象，该对象知道所有不同的对象列，我们可以将其用作查找：

var lookup = {
    products: ["abbr","name"],
    zipcodes: ["zip"],
    offices: ["city", "state", "zipcode"]
}

我预见到这个

ValueConverter

在我的新网站中被用作很多东西的过滤器。最好在任何对象上使用它，并将一个serch术语作为第二个参数传递，将要匹配的列名列表作为第三个参数传递，并让它有条件地使用

&&

和/或

|

进行搜索。哇，最后一点让人困惑

下面是我迄今为止对视图html代码和过滤器js的拍摄，我正在努力解决如何做到这一点：

数据（我们正在筛选的实用程序对象）

GenericFilter.js

export class GenericFilterValueConverter {
    toView(array, value, cols) {

        var columns = cols;
        var matchLogic = "item => {";
        var regex = new RegExp(value, 'gi');
        //debugger;
        for (var i = 1; i <= columns.length; i++) {
            matchLogic += "item." + columns[i] + ".match(regex)";
            matchLogic += (i < columns.length) ? " || " : "";
            matchLogic += (i === columns.length ? "}" : "");
        }
        var matcher = eval(matchLogic);

        return array.filter(
            matcher
        );
    }
}

export class Utilities { 
    constructor(...) {
    //below the definedColumns are defined in the js module
    this.definedColumns = ["abbr","utilityName"];
}

    export class GenericFilterValueConverter {

    toView(array, value, cols, showResults=false) {

        if (!value) {
            return showResults ?  array :  [];
        };

        var filteredArray = array.filter(
            function(objArray) {
                for (var col in objArray) {
                    if (objArray.hasOwnProperty(col)) {
                        if (cols.indexOf(col) != -1 && objArray[col].toLowerCase().indexOf(value.toLowerCase()) != -1) {
                            return true;
                        }
                    }
                };
                return false;
            });
        return filteredArray;
    }
}

view.html

<template>
    <!--<require from="./officeFilter"></require>-->
    <require from="../services/genericFilter"></require>
    <input type="text" name="searchValue" value.bind="searchValue" />
    <div class="grid" repeat.for="office of offices | genericFilter:searchValue:definedColumns">
            <!--MORE HTML HERE TO RENDER GRID-->
        </div>
    </div>
</template>

目前我没有收到JavaScript错误，但我的过滤器也不再工作。我的页面上没有任何结果，就好像ValueConverter是第一次运行，而

数组。filter

已经过滤掉了所有结果，可能吗

---

使用eval的想法显然不是最好的，我下面给出的答案并没有使用邪恶的eval

这是我提出的解决方案，因为我没有幸用eval（）构建逻辑OR语句：

GenericFilter.js

export class GenericFilterValueConverter {
    toView(array, value, cols) {

        var columns = cols;
        var matchLogic = "item => {";
        var regex = new RegExp(value, 'gi');
        //debugger;
        for (var i = 1; i <= columns.length; i++) {
            matchLogic += "item." + columns[i] + ".match(regex)";
            matchLogic += (i < columns.length) ? " || " : "";
            matchLogic += (i === columns.length ? "}" : "");
        }
        var matcher = eval(matchLogic);

        return array.filter(
            matcher
        );
    }
}

export class Utilities { 
    constructor(...) {
    //below the definedColumns are defined in the js module
    this.definedColumns = ["abbr","utilityName"];
}

    export class GenericFilterValueConverter {

    toView(array, value, cols, showResults=false) {

        if (!value) {
            return showResults ?  array :  [];
        };

        var filteredArray = array.filter(
            function(objArray) {
                for (var col in objArray) {
                    if (objArray.hasOwnProperty(col)) {
                        if (cols.indexOf(col) != -1 && objArray[col].toLowerCase().indexOf(value.toLowerCase()) != -1) {
                            return true;
                        }
                    }
                };
                return false;
            });
        return filteredArray;
    }
}

view.html

<template>
    <require from="../services/genericFilter"></require>
    <input type="text" name="searchValue" value.bind="searchValue"/>
        <div  class="grid" repeat.for="utility of utilities | genericFilter:searchValue:definedColumns:true">
                <!--template repeats for each utility-->
            </div>
        </div>
    </div>
</template>