ノックアウトコンポーネントビューは、ViewModelで観察可能な変更が行われても更新されません

Question

AMDを使用してhtmlテンプレートとビューモデルコードを取得するためのコンポーネントセットアップがあります。すべてうまく動作します。コンポーネントは渡されたパラメータで正常に動作し、正常に動作するとロードされます。問題は、テンプレートビューで値が表示されるviewModelでオブザーバブルを定義したことですが、オブザーバブルの値が変更されてもビューのテキストは変更されません。誰でもここで何が起こっているのか説明できますか？バインドしようとしているテキストはmodalTitleです。モーダルロード時にタイトルが 'TEMP'ですが、コンソールに移動して 'window.modalTitle（）'と入力すると、 'CREATE REPORT SCHEDULE'が表示されます。それは、オブザーバブルの最初の値を取得してからそれを無視するというものです。とにかく私はそれが更新を探すために強制することができますか？

のViewModel：（schedules.component.js）

define(['knockout'], function (ko) { 
    console.log('schedules hit'); 
    loadCss('schedules'); 

    function SchedulesViewModel(params) { 
    this.scheduledItems = params.scheduledItems; 
    this.itemName = params.itemName; 
    this.modalTitle = ko.observable("TEMP"); 
    window.modalTitle = this.modalTitle; 
    } 

    SchedulesViewModel.prototype.initiateAddScheduledItem = function() { 
    this.modalTitle("CREATE " + this.itemName + " SCHEDULE"); 
    $('#schedulesModal').modal('show'); 
    }; 

    SchedulesViewModel.prototype.removeSelectedScheduledItem = function() { 
    this.chosenValue('dislike'); 
    }; 

    window.ReportsApp.SchedulesViewModel = SchedulesViewModel; 

    return SchedulesViewModel; 
}); 

ビューテンプレート

<div id="schedulesModal" class="modal fade lcmsModal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button>--> 
     <img src="/Content/images/modalASLogo.png" style="float: right;" /> 
     <h4 class="modal-title" data-bind="text: modalTitle()">Test Title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body ...</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">CANCEL</button> 
     <button type="button" class="btn btn-primary">SAVE</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 
<!-- /Bootstrap Modal --> 

Answer 1

this.itemNameが観察として定義されていないので、それは変更されません。観測値が変更されると自動的に更新される計算された観測値を定義する方がよいでしょう。
prototypeを使用してメソッドを追加する代わりに、あなたのためにそれを狙うknockout関数を使用することができます。 例：https://jsfiddle.net/kyr6w2x3/34/

function SchedulesViewModel(params) { 
    var self = this ; 
    self.scheduledItems = ko.observable(params.scheduledItems); 
    self.itemName = ko.observable(params.itemName); 
    self.modalTitle = ko.observable("TEMP"); 
    self.chosenValue= ko.observable(); 

    self.modalTitle = ko.computed(function() { 
     return "CREATE " + self.itemName() + " SCHEDULE" ; 
    }, self); 

    // you can change below to show your modal whenever you want 
    $('#schedulesModal').modal('show'); 

    self.removeSelectedScheduledItem = function(){ 
     self.chosenValue('dislike'); 
    } 
    } 


ko.applyBindings(new SchedulesViewModel({scheduledItems:"scheduledItems" ,itemName : "itemName" })); 

更新：はいあなたはネストされたビューモデルを言うために、複数のビューモデル以上を持つことができます。新しい例を見て、あなたのモデル間でコミュニケーションをとる方法を見てください。 https://jsfiddle.net/kyr6w2x3/35/