CODEWITHSUNDEEP
knockout.js
Vikas Khartude
Vikas Khartude

Reputation: 90

knockout: How to call the functions of another view model

I am using the knockout.js with the asp.net web api. I have created the messaging related functionality. i have created two separate view models one for sending the message and other for displaying the message. I am facing the issue to implement the following functionality. 

function SendMessagesViewModel() {
    var self = this;
    self.SendMessage = function () {
        $.ajax({
            url: _pageURL + "/api/Communication/SendMessage",
            type: "POST",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(message),
            dataType: "json",
            success: function (response) {
                    if (response == true) {                       
                    // Call the DisplayMessage function of DisplayMessagesViewModel
                }
                },  
        });
        }
}

function DisplayMessagesViewModel() {
    var self = this;
    self.DisplayMessage = function () {
        $.ajax({
            url: _pageURL + "/api/Communication/DisplayMessage",
            type: "POST",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(message),
            dataType: "json",
            success: function (response) {
                    if (response == true) {                       
                    //set observable which will be used to bind the html
                }
                },  
        });
        }
}

Upvotes: 1

Views: 3399

Answers (1)

Nkosi
Nkosi

Reputation: 247098

You can pass an instance of the DisplayMessagesViewModel into the SendMessagesViewModel as a dependency, either in the constructor or in the function. This will give you access to the viewmodel so you can call the functions you want

Option 1. In constructor:

function SendMessagesViewModel(displayMessagesViewModel) {
    var self = this;
    self.SendMessage = function (message) {
        $.ajax({
            url: _pageURL + "/api/Communication/SendMessage",
            type: "POST",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(message),
            dataType: "json",
            success: function (response) {
                if (response == true) {                       
                    // Call the DisplayMessage function of DisplayMessagesViewModel
                    displayMessagesViewModel.DisplayMessage();
                }
            },  
        });
    }
}

and used like this 

//..other js code
var displayMessagesViewModel = new DisplayMessagesViewModel();
//dependency injected at creation of view model
var sendMessagesViewModel = new SendMessagesViewModel(displayMessagesViewModel);
// when ready to call function:
var message = { message:"Hello world" };
sendMessagesViewModel.SendMessage(message);
//..other js code

Option 2. In function

function SendMessagesViewModel() {
    var self = this;
    self.SendMessage = function (message, displayMessagesViewModel) {
        $.ajax({
            url: _pageURL + "/api/Communication/SendMessage",
            type: "POST",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(message),
            dataType: "json",
            success: function (response) {
                if (response == true) {                       
                    // Call the DisplayMessage function of DisplayMessagesViewModel
                    displayMessagesViewModel.DisplayMessage();
                }
            },  
        });
    }
}

and used like this 

//..other js code
var displayMessagesViewModel = new DisplayMessagesViewModel();
var sendMessagesViewModel = new SendMessagesViewModel();
//when ready to call function
var message = { message:"Hello World" };
//dependency injected when calling function
sendMessagesViewModel.SendMessage(message, displayMessagesViewModel);  
//..other js code

Upvotes: 1

Related Questions