将参数从一个函数传递到另一个而不调用它

Question

I'm trying to get either options or, ideally, dynamicTable passed from initializeTable to the applyTableFilters function and I'm having problems getting the expected values. I'm using List.js to make a table dynamic and I need to pass or recreate the dynamicTable object so I can go ahead and use it to filter the table.

Here is the function that creates the List.js object from the HTML table:

function initializeTable(options) { // initializes table to be dynamic using List.js functions
    var dynamicTable = new List("table-content", options);

    dynamicTable.on("updated", function (list) { // writes a message to the user if no results are found
        if (list.matchingItems.length == 0) {
            document.getElementById("no-results").style.display = "block";
        }
        else {
            document.getElementById("no-results").style.display = "none";
        }
    });

    console.log(dynamicTable);
    console.log(options);
    console.log(arguments.length);

    applyTableFilters.bind();
}

I've tried different methods to pass the variables to the function below. I tried .call , applyTableFilters(args) , and .apply , but the problem is that I do not want the function to execute from inside here, only when the click event from the button goes off (not shown in these functions).

This is the function I want to pass the object to and proceed to make the filter functions using it:

function applyTableFilters(dynamicTable) {
    var form = document.getElementById("filter-form");

    //console.log(options);

    //var dynamicTable = new List("table-content", options);

    console.log(dynamicTable);

    var filters = form.querySelectorAll('input[type="checkbox"]:checked');

    dynamicTable.filter(function (item) {
        console.log(item);
        console.log(item._values);

        if (item.values().id == 2) {
            return true;
        }

        else {
            return false;
        }

        //var filterStrings = [];

        //console.log(filters);

        //for (var i = 0; i < filters.length; i++) {
        //    var filterVal = filters[i].value;
        //    var filterString = "(" + item.values().column == filterVal + ")"; // filterVal.contains(item.values().column) || 
        //    filterStrings.push(filterString);

        //    console.log(filterVal);
        //    console.log(filterString);
        //}

        //console.log(filterStrings);

        //var filterString = filterStrings.join(" && ");

        //console.log(filterString);
        //return filterString;
    });
}

I've used:

applyTableFilters.bind(this, dynamicTable/options); 
applyTableFilters.bind(null, dynamicTable/options);
applyTableFilters.bind(dynamicTable/options);

Switching between the two since I don't need both passed if one ends up working, etc. I always get a mouse event passed in and that's not even the right type of object I'm looking for. How can I get the right object passed? Also all the values in the first function are not empty and are populated as expected so it's not the original variables being undefined or null. Thanks in advance.

Answer 1

From your initializeTable function return a function that wraps the applyTableFilters function with the arguments you want.

Then assign the returned function to a var to be executed later.

function initializeTable(options) {
    var dynamicTable = new List("table-content", options);
    // other stuff

    return function () {
        applyTableFilters(dynamicTable)
    }
}

// other stuff

var applyTableFiltersPrep = initializeTable(options)

//  later, when you want to execute...
applyTableFiltersPrep()

JSFiddle example