當它的ViewModel Observable改變時，Knockout組件視圖不更新

我有一個組件設置使用AMD來獲取html模板和viewmodel代碼。一切正常。當它傳遞給它的參數應該表現良好並且表現良好時，組件會加載。問題是我在viewModel中定義了一個observable，其值在模板視圖中顯示，但是當observable的值更改視圖上的文本不會更改。任何人都可以解釋這裏發生了什麼？我試圖綁定的文本是modalTitle。當模式加載它的標題是'TEMP'，但是如果我去控制檯並輸入'window.modalTitle（）'，我會得到'CREATE REPORT SCHEDULE'。這就好像視圖獲得了可觀察值的第一個值，然後忽略它。無論如何，我可以強迫它尋找更新？當它的ViewModel Observable改變時，Knockout組件視圖不更新

視圖模型：（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 -->

來源

2016-08-05 Disease

它沒有得到改變，因爲this.itemName沒有被定義爲可觀察到的。最好定義一個計算的觀測值，每當有任何觀測值發生變化時它都會自動更新。
而不是使用prototype來添加方法，你可以使用敲除功能，它爲你提供幫助。例子：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/

來源

2016-08-06 00:18:35

哇，那裏的眼睛非常好 - 我甚至沒有注意到我的可觀察性依賴於一個不可觀察的。我認爲使用異步組件會讓我失望 - 我通常將整個視圖模型聲明爲IIFE，這樣我可以更好地封裝，但是使用異步模塊，您明確需要返回常規函數以使其工作。我得到的唯一問題，我將不得不在稍後看第二次調用ko.applyBindinds如在這裏看到的。由於這只是一個組件，我有一個普通的viewModel，該組件繼承自。我不知道你是否可以有多個viewModels。 – Disease

@Disease看看更新。 –

我瞭解jsfiddle和nested viewModels，所以我想我的問題是：我可以根據需要多次調用applyBindings嗎？請記住，上面的代碼是用於異步加載的組件，我們將有很多這樣的代碼。我已經將全局viewModel保存到窗口變量中，但是當第二個組件加載時，它將如何從第一個組件獲取viewModel，以便所有組件viewmodel都被綁定？我似乎無法將這些組件的viewModel綁定到全局上下文。 window.schedulesViewModel = SchedulesViewModel不起作用。保存傳遞的ko也沒有。 – Disease

當它的ViewModel Observable改變時，Knockout組件視圖不更新

回答

相關問題