具有Ramda的多同位素过滤

问题描述 投票:0回答:1

我正在增强同位素应用程序-现在正在尝试将多过滤器的值组合到应用程序中。

我注意到两个问题。

1st-是我设置过滤器时-它会更新状态-但几乎像我的状态树一样-它在我查看状态后似乎没有直接注册setState。因此过滤不准确。

2nd-多个过滤器的实际组合。所以我知道我可以有2个过滤器-每个过滤器都有一组值

let availableFilters = ['statuspromo', 'regionspromo'];
//statuspromo
//regionspromo
let comboValues = [];
availableFilters.map(filter => {
    if(this.state['filteredOption_'+filter]){
        comboValues.push(this.state['filteredOption_'+filter]);
    }
});

这给了我一个comboValues数组-包含2个过滤器-但现在我需要将它们组合。

在此级别,comboValues-看起来像[['LIVE','IN_PROGRESS'],['SIEE']]

我首先使用ramda来展平数组-flatten(comboValues)-但这会给我一个OR的情况。

我需要合并两个或更多数组集----就像“ opts ='.LIVE.SIEE,.IN_PROGRESS.SIEE'”-将其推入同位素过滤器rang(opts)中,以便2过滤器处于AND模式

什么是最好的方法。想要干净地执行此操作-甚至是我使用旧方法映射组合值的方式,我都将添加一个类变体和一个联接以进行选择]

let opts = comboValues.map(val => '.' + val).join(',');
let options = { filter: opts };
this.state.iso.arrange(options);

        let layer1 = [];
        let layer2 = [];

        let merged = [];

        if(comboValues[0]){
            layer1 = comboValues[0].map(val => '.' + val);//.join(',');
        }
        if(comboValues[1]){
            layer2 = comboValues[1].map(val => '.' + val);//.join(',');

            layer1.map(val1 => {
                layer2.map(val2 => {
                    merged.push(val1+''+val2);
                });
            });
        }

//let layer1 = [".EXPIRED", ".SONY_FINALIZING"]
//let layer2 = [".SIEJA-ASIA"]
//let merged = [".EXPIRED.SIEJA-ASIA", ".SONY_FINALIZING.SIEJA-ASIA"]

        console.log("layer1", layer1);
        console.log("layer2", layer2);

        console.log("merged", merged);

        let opts = merged.join(',');
        console.log("opts", opts);
        let options = { filter: opts };
        this.state.iso.arrange(options);

最终当前代码

multiFilterIsotope = () => {
    console.log("this.state!!!!!!!!!!!", this.state);

    let availableFilters = ['statuspromo', 'regionspromo'];
    //statuspromo
    //regionspromo
    let comboValues = [];
    availableFilters.map(filter => {
        if(this.state['filteredOption_'+filter]){
            comboValues.push(this.state['filteredOption_'+filter]);
        }
    });

    //comboValues = flatten(comboValues);
    //console.log("comboValues", comboValues);

    let layer1 = [];
    let layer2 = [];

    let merged = [];

    if(comboValues[0] && comboValues[0].length > 0){
        layer1 = comboValues[0].map(val => '.' + val);//.join(',');

        //merged = layer1;
    }
    if(comboValues[1] && comboValues[1].length > 0){
        layer2 = comboValues[1].map(val => '.' + val);//.join(',');

        layer1.map(val1 => {
            layer2.map(val2 => {
                merged.push(val1+''+val2);
            });
        });
    } else {
        merged = layer1;
    }

    console.log("layer1", layer1);
    console.log("layer2", layer2);

    console.log("merged", merged);

    let opts = merged.join(',');
    console.log("opts", opts);
    let options = { filter: opts };
    this.state.iso.arrange(options);


    //comboValues = ["SONY_FINALIZING.SIEJA-ASIA", "EXPIRED.SIEJA-ASIA"];


    //let opts = comboValues.map(val => '.' + val).join(',');
    //let options = { filter: opts };
    //this.state.iso.arrange(options);
}

我正在增强同位素应用程序-现在正在尝试将多过滤器的值组合到该应用程序中。我注意到2个问题。第一个-是我设置过滤器时-它...

javascript jquery-isotope ramda.js
1个回答
0
投票

我想出了这一点-但这是否可以使用更多过滤器选项-如3个过滤器?

© www.soinside.com 2019 - 2024. All rights reserved.