ノックアウト：別のビューモデルの関数を呼び出す方法

Question

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

Answer 1

あなたは、コンストラクタまたは機能のいずれかで、依存性としてSendMessagesViewModelにDisplayMessagesViewModelのインスタンスを渡すことができます。

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のように使用：あなたは

オプションコンストラクタ1.をしたい関数を呼び出すことができますので、これはあなたがのviewmodelにアクセスできるようになります。機能あり

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