knockoutjs中的選項綁定和事件處理

我在我的應用程序中實現了一個頁面，用戶可以從下拉菜單中選擇一個作者，並查看該特定作者的所有書籍及其詳細信息。該數據在jsp頁面綁定情況如下：knockoutjs中的選項綁定和事件處理

<select id="author-dropdown" 
     data-bind="options: authors, 
        value: selectedAuthor, 
        optionsText: currentAuthorName, 
        event: { change: getBooksDetails }">

它工作正常，但存在與期權結合的一個大問題。當用戶更改書表中的某些內容（下拉下方）但不保存它們，然後嘗試從下拉列表中更改作者時，彈出一個模式，詢問「是否要保存更改？」

用戶有三種選擇：

確認保存
確認爲不保存
關閉模式。

如果用戶關閉模式什麼都不會發生，已經是作者的價值已經更改爲新的，如果用戶點擊保存在表的底部，那麼這本書的詳細信息將得到保存錯誤的作者！

我真的很困惑knockout.js選項綁定的行爲，我的問題是我怎麼能控制選項綁定在這種情況下？如果用戶關閉模式，如何獲得selectedAuthor的先前值？

來源

2016-08-22 Nisman

不存在未保存的更改或舊的價值觀念，除非你寫一個。請參閱http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html –

您可以使用一個變量來存儲默認值或上次保存的下拉值，以便您可以跟蹤舊值，然後在用戶取消模態時將您的下拉值設置回舊值。下面我只是向您展示邏輯，但您可能需要根據您的模型和數據進行更改。 https://jsfiddle.net/kyr6w2x3/51/

function MainViewModel() { 
    var self = this ; 
    self.selectedAuthor = ko.observable("SecondAuthor"); 
    self.authors = ko.observableArray([{"currentAuthorName":"FirstAuthor",value:"FirstAuthor"},{"currentAuthorName":"SecondtAuthor",value:"SecondAuthor"},  {"currentAuthorName":"ThirdAuthor",value:"ThirdAuthor"}]); 

     self.oldSelectedAuthor = ko.observable(self.selectedAuthor()); 

    self.Save = function(){ 
     self.oldSelectedAuthor(self.selectedAuthor()); 
     $('#myModal').modal('hide'); 
    } 
    self.Cancel = function(){ 
     self.selectedAuthor(self.oldSelectedAuthor()) 
    } 
    self.showModal = function(){ 
     $('#myModal').modal('show'); 
    } 
    } 


ko.applyBindings(new MainViewModel());

HTML：

<div id="myModal" class="modal fade lcmsModal" tabindex="-1" role="dialog"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     </div> 
     <div class="modal-body"> 
     <div><strong>CurrentSelectedDropDown:</strong> </div> 
     <div data-bind="text:selectedAuthor">SelectedDropDown: </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal" data-bind="click:Cancel">CANCEL</button> 
     <button type="button" class="btn btn-primary" data-bind="click:Save">SAVE</button> 
     </div> 
    </div> 
    </div> 
</div> 
<select class="form-control" data-bind="foreach: authors ,value:selectedAuthor"> 
<option data-bind="value: value,text:currentAuthorName"></option> 
<input type="button" value ="Show Modal" data-bind="click:showModal">

來源

2016-08-22 20:47:52

knockoutjs中的選項綁定和事件處理

回答

相關問題