녹아웃 구성 요소 뷰가 ViewModel 관찰 가능 변경시 업데이트되지 않음

Question

html 템플릿과 뷰 모델 코드를 얻기 위해 AMD를 사용하는 구성 요소 설정이 있습니다. 모든 것이 잘 작동합니다. 구성 요소는 전달 된 매개 변수로 정상적으로 작동하고 정상적으로 작동 할 때로드됩니다. 문제는 viewModel에서 관찰 가능 값을 정의한 것입니다.이 값은 템플릿 뷰에 표시되지만 관찰 가능 값이 변경되면 뷰의 텍스트는 변경되지 않습니다. 아무도 여기서 무슨 일이 일어날 지 설명 할 수 있습니까? 내가 바인딩하려고하는 텍스트는 modalTitle입니다. 모달을로드 할 때 제목이 'TEMP'이지만 콘솔에 입력하고 'window.modalTitle()'을 입력하면 '보고서 일정 만들기'가 표시됩니다. 그것은 관측 가능의 첫 번째 가치를 얻고 그 후에 그것을 무시하는 것과 같습니다. 어쨌든 강제로 업데이트를 찾을 수 있습니까?

뷰 모델 (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/