Knockout js filtering

See more:

Knockout.js

Hi,
I am new to Knockout and i am working on a MVC 4 Web API project . I have binded some data to my view using Knockout data-bind property and now i want to implement a filtering functionality. My Data exists in a single array with a which also has another dimension for some items . For ex : I have a propery Filter in my ViewModel, which has some properties like Id,Name etc .

The filtering criteria is FilterName but i am finding it difficult to implement it. Below is the code i tried

nction containerViewModel() {
    mainViewModel = this;

    mainViewModel.isBusy = ko.observable(false);
    mainViewModel.errorMessage = ko.observable("");
    mainViewModel.currentFilter = ko.observable();
    mainViewModel.containerModel = ko.observable(
        {
            ERPData: ko.observable()
        }
        );

    mainViewModel.filterProducts = ko.computed(function () {
        if (!mainViewModel.currentFilter()) {
            return mainViewModel.containerModel();
        } else {
            return ko.utils.arrayFilter(mainViewModel.containerModel(), function (container) {
                return container.Filter.FilterName == mainViewModel.currentFilter();
            });
        }
    });

    mainViewModel.filter = function (Filter) {
        mainViewModel.currentFilter(Filter);
    }

But when i debug the script its showing not defined(filtername) in this piece of code

mainViewModel.filter = function (Filter) {
       mainViewModel.currentFilter(Filter);
   }

This is the binding I used <input type="button" data-bind="click: function () { filter(FilterName) }, value: FilterName, attr: { id: 'ERPFilter_' + FilterName } " />

Can anyone please help me

I was able to do a similar one is JSFiddle,Here's the link JSFiddle[^]

Or is it possible to bind a normal js function with data-bind property , so that i can redirect to controller and get the filtered data.