Click here to Skip to main content
15,901,284 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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

JavaScript
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

JavaScript
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.
Posted
Updated 6-Aug-15 4:50am
v6

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900