jquery ajax呼び出しからKnockOutJs ViewModelをどのように更新しますか？

Question

スニペットからわかるように私は、ViewModelのisShowMsgとshowMessageValueをbtnSumbitのクリックの後で更新したいと思います。 MVCのコントローラは、基本的にjson（fullName）を返します。 jquery ajax呼び出しから既にバインドされているビューモデルを更新するにはどうすればよいですか？

<script type="text/javascript"> 
 

 
    $(document).ready(function() { 
 

 
     var ViewModel = function (first, last, isshowmsg, showmsg) { 
 
      this.firstName = ko.observable(first); 
 
      this.lastName = ko.observable(last); 
 
      this.isShowMsg = ko.observable(isshowmsg); 
 
      this.showMessageValue = ko.observable(showmsg); 
 
     }; 
 
             
 
     $("#btnSubmit").click(function() { 
 

 
      var firstName = $("#txtFirstName").val(); 
 
      var lastName = $("#txtLastName").val(); 
 

 
      $.ajax({ 
 
       url: '@Url.Action("Submit","Home")', 
 
       type: "POST", 
 
       data: { firstName: firstName, lastName: lastName }, 
 
       dataType: "json", 
 
       success: function (response) {      
 
        if(response.fullName != undefined || response.fullName != null) 
 
        { 
 
         ViewModel.isShowMsg = true; 
 
         ViewModel.showMessage = response.fullName;       
 
        } 
 
       } 
 
      }); 
 
     }); 
 

 
     ko.applyBindings(new ViewModel("Planet", "Earth", false, "")); 
 
     
 
    }); 
 

 
</script>

<style> 
 
    body { font-family: arial; font-size: 14px; } 
 
    .liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; } 
 
    .liveExample input { font-family: Arial; } 
 
    .liveExample b { font-weight: bold; } 
 
    .liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; } 
 
    .liveExample select[multiple] { width: 100%; height: 8em; } 
 
    .liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; } 
 
</style>

<div class="col-md-12"> 
 

 
      <div class='liveExample'> 
 
       <p>First name: <input id="txtFirstName" data-bind='value: firstName' /></p> 
 
       <p>Last name: <input id="txtLastName" data-bind='value: lastName' /></p>     
 
       <label id="lblResult" data-bind="visible: isShowMsg, value: showMessageValue"></label> 
 
      </div> 
 

 
      <button id="btnSubmit">Submit</button> 
 

 
     </div>

Answer 1

このようにしてみてください。

ViewModel.isShowMsg(true); 
ViewModel.showMessage(response.fullName); 

は、あなたが良いノックアウトコードを書くためにはjQueryを手放す必要があるthe docs on observables

Answer 2

を参照してください。 jQueryセレクタを使用している場合、おそらく何か間違っているでしょう。クリックイベントの処理方法については、the click binding docsを参照してください。 Knockout tutorialもあなたの時間の価値があります。

ビューモデルにコンストラクタ関数ViewModelを作成しましたが、ビューモデル自体のように扱います。 ViewModel.isShowMessageは存在しません。参照できるように、ビューモデルを変数に割り当てる必要があります。また、オブザーバブルはセッタ/ゲッタです。値を割り当てるには、引数として渡す必要があります。

var vm = new ViewModel("Planet", "Earth", false, ""); 
ko.applyBindings(vm); 
...and elsewhere... 
vm.isShowMessage(true);