Call knockout viewmodel function in jQuery

Question

How to call a viewmodel function in a jQuery function? I just want to call a function of viewmodel function from a Javascript function.

function ContactsViewModel(data) {
  var self = this;
  // Editable data
  self.Contacts = ko.observableArray(JSON.parse(data));
  self.limit = ko.observable(20);
  self.changeNumber = function(item){
    self.limit(self.limit()+20);
    self.Contacts.push(item);
  }
  self.myPostProcessingLogic = function(elements) {
    if ($('#KnockOutContacts').children().length === ko.toJS(self.Contacts).length) {
      // Only now execute handler
      jq();
    }
  }
}

How to call changeNumber from the jscroll pane function?

$('.jspScrollable').bind(
  'jsp-arrow-change',
  function(event, isAtTop, isAtBottom, isAtLeft, isAtRight) {
    // Now look at the is* parameters and do what you
    // need to do. All four of the is* parameters are booleans.
    if(isAtBottom) {
      ContactsViewModel.changeNumber();
    }
  }
);

the data is coming from server

function returnData(url,data,type){
    $.post(url, data, function(returnedData) {

    if(type == "contacts")
    {   
    ko.applyBindings(new ContactsViewModel(returnedData),$("#KnockOutContacts")[0]);    
    }
    else if(type == "logs")
    {
    ko.applyBindings(new LogsViewModel(returnedData),$("#KnockOutLogs")[0]);    
    }
    else if(type == "sms")
    {
        ko.applyBindings(new SmsViewModel(returnedData,"#KnockOutSms"),$("#KnockOutSms")[0]);   
    ko.applyBindings(new SmsViewModel(returnedData,"#KnockOutSmsData"),$("#KnockOutSmsData")[0]);   


    }
});
}

Thanks in advance.

Answer 1

You Can do something like this:

---

ViewModel

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

    self.search = function (param) {
        //do something
    };
}

---

HTML

<button data-bind="click: function () { Search() }" class="" id="searchBtn">Search</button>

---

Jquery

function Search() {
    // paramvalue = 1; 
    viewModel.search(paramvalue);                  
}

Answer 2

Create a custom binding that hooks up the jQuery stuff. You should never have any DOM related code in your viewmodels its a antipattern.

Something like (Not working code)

ko.bindingHandlers.scrollable = {
   init: function(element, valueAccessor) {
      var onScroll = valueAccessor();
      $(element).bind(
        'jsp-arrow-change',
        function(event, isAtTop, isAtBottom, isAtLeft, isAtRight) {
        // Now look at the is* parameters and do what you
        // need to do. All four of the is* parameters are booleans.
        if(isAtBottom) {
           onScroll();
        }
      });
   }
};

THen used from your view like

<div data-bind="scrollable: changeNumber"></div>

Answer 3

I agree with Anders about using custom bindings. But if you really want to, try returning 'self' from your ContactsViewModel (see example below)

function ContactsViewModel(data) {
  var self = this;
  // Editable data
  self.Contacts = ko.observableArray(JSON.parse(data));
  self.limit = ko.observable(20);
  self.changeNumber = function(item){
    self.limit(self.limit()+20);
    self.Contacts.push(item);
  }
  self.myPostProcessingLogic = function(elements) {
    if ($('#KnockOutContacts').children().length === ko.toJS(self.Contacts).length) {
      // Only now execute handler
      jq();
    }
  }

  //return self
  return self;

}

//Variable you'll use to reference in jQuery
var myVm = ContactsViewModel(yourdata);
ko.applyBindings(myVm);

myVm.changeNumber(yourItem);