knockout:如何调用另一个视图模型的功能

时间:2016-03-23 12:35:04

标签: knockout.js

我正在使用带有asp.net web api的knockout.js。我创建了与消息传递相关的功能。我创建了两个单独的视图模型,一个用于发送消息,另一个用于显示消息。 我正面临着实现以下功能的问题。

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
                }
                },  
        });
        }
}

1 个答案:

答案 0 :(得分:1)

您可以将DisplayMessagesViewModel的实例作为依赖项传递到SendMessagesViewModel,无论是在构造函数中还是在函数中。这将使您可以访问viewmodel,以便调用所需的函数

选项1。在构造函数中:

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();
                }
            },  
        });
    }
}

并像这样使用

//..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

选项2。在功能

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();
                }
            },  
        });
    }
}

并像这样使用

//..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