Strange data binding issue

Question

I have a crazy issue with my code. I'm trying to implement this jsfiddle code

In my code, but I have no success. Here is what I have done:

ViewModel:

viewModelInbox = function(){
                    query: ko.observable('');
                    var checked = false,
                    mainData = ko.observableArray([]),
                    showView = ko.observable(),
                    currentView = ko.observable(),
                    approve = function(){
                    },

                    disapprove = function(){},
                    toggle = function () {
                        if(checked){
                            $.each(mainData(), function(){
                                this.checkB(false);
                            });
                            checked = false;
                            return;
                        }
                        if(!checked){
                            $.each(mainData(), function(){
                                this.checkB(true);
                            });
                            checked = true;
                            return;
                        }
                    };

                    viewModelInbox.mainData = ko.dependentObservable(function() {
                    var search = this.query().toLowerCase();
                    return ko.utils.arrayFilter(viewModelInbox, function(test) {
                        return test.name.toLowerCase().indexOf(search) >= 0;
                    });

                }, viewModelInbox);
                    return {
                        mainData: mainData,
                        showView: showView,
                        currentView: currentView,
                        approve: approve,
                        disapprove: disapprove,
                        toggle: toggle
                    };

                },

The mainData observable array is holding some values as name, code, date, etc.

The issue I have is that I'm getting this error:

TypeError: this.query is not a function 

var search = this.query().toLowerCase();

I'm pretty sure that I'm missing something really small, but as I'm a total noob in knockoutjs I can not spot it.

Answer 1

Or you can write like this:

var ViewModelInbox = function() {
    var self = this;

    self.query = ko.observable('');

    self.dataSource = []; // data source

    self.mainData = ko.computed(function() {
        var search = self.query().toLowerCase();
        return ko.utils.arrayFilter(self.dataSource, function(item) {
            return item.name.toLowerCase().indexOf(search) >= 0;
        });
    });

    self.showView = ko.observable();
    self.currentView = ko.observable();

    self.approve = function() {

    };

    self.disapprove = function() {

    };

    self.checked = ko.observable(true);

    self.toggle = function() {
        var toCheck = !self.checked();
        ko.arrayForEach(self.mainData(), function(data) {
            data.checkB(toCheck);
        });
        self.checked(toCheck);
    };
};

ko.applyBindings(new ViewModelInbox());

Answer 2

It seems not something small.

Your view model should be either

var ViewModel = function() {
    this.query = ko.observable(''); // use ';'
    this.mainData = ko.observableArray([]);
};

or

var viewModel = {
    query: ko.observable(''),  // use ','
    mainData: ko.observableArray([])
};

You can't mix them.