knockoutjs提交綁定不處理輸入密鑰正確

Question

我有一個jQuery UI對話框與表單上的knockoutjs提交綁定。對話框可以通過按下取消按鈕，按對話框標題欄上的關閉按鈕，按下轉義鍵或按保存按鈕來關閉。我的意圖是取消，轉義和標題欄關閉事件應該關閉對話框而不應用任何動作，而按下回車或點擊'保存'應該執行對話動作。一切都按預期工作，除了輸入鍵，這會導致取消事件，而不是提交事件。

我已經創建了一個jsfiddle來說明這一點，並且包含以下用於引用的代碼。

我道歉了冗長的代碼...

基因

<!-- ko with: dialog --> 
<div id="taskdlg" class="resizeableDialog" 
    data-bind="dialog: {autoOpen: false, title: 'Edit task', height: 200, width: 500, modal: true, close: updateCloseState}, openWhen: open"> 
    <form data-bind="submit: update"> 
     <table> 
      <tr> 
       <td style="width: 100px;"><label for="tasktitle">Title</label></td> 
       <td width="*"> 
        <input id="tasktitle" type="text" placeholder="Task name" data-bind="value: titletext, valueUpdate: 'afterkeydown'" /> 
       </td> 
      </tr> 
      <tr> 
       <td><button style="float: left;" data-bind="click: cancel">Cancel</button></td> 
       <td><button style="float: right;" type="submit">Save</button></td> 
      </tr> 
     </table> 
    </form> 
</div> 
<!-- /ko --> 

<button data-bind="click: editTask">Edit</button> 
<span data-bind="text: task"></span> 

的JavaScript如下：

ko.bindingHandlers.dialog = { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     var options = ko.utils.unwrapObservable(valueAccessor()); 
     setTimeout(function() { $(element).dialog(options || {}); }, 0); 

     //handle disposal (not strictly necessary in this scenario) 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).dialog("destroy"); 
     }); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor) { 
     var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().openWhen); 
     $(element) 
      .dialog(shouldBeOpen ? "open" : "close"); 
    } 
}; 

function Task(name) { 
    var self = this; 
    this.title = ko.observable(name); 

    this.toString = function() { return "Task: " + self.title(); }; 
} 

function TaskDialog(viewModel) { 
    var self = this; 

    this.viewModel = viewModel; 
    this.task = ko.observable(); 
    this.open = ko.observable(false); 
    this.titletext = ko.observable(); 

    this.editTask = function(task) { 
     self.task(task); 
     self.titletext(task.title()); 
     self.open(true); 
    } 

    this.update = function() { 
     var task = self.task(); 
     task.title(self.titletext()); 
     self.open(false); 
    } 

    this.updateCloseState = function() { 
     if (self.open()) 
      self.open(false); 
    } 

    this.cancel = function() { 
     self.open(false); 
    } 
} 


function viewModel() { 
    var self = this; 
    this.dialog = ko.observable(new TaskDialog(self)); 
    this.task = ko.observable(new Task('sample task')); 

    this.editTask = function() { 
     self.dialog().editTask(self.task()); 
    } 
}; 

ko.applyBindings(new viewModel()); 

Answer 1

如果一個按鈕沒有一個類型，然後在瀏覽器假定它可以被認爲是一個submit按鈕。因此，當您點擊enter時，取消按鈕的方法正在執行並阻止實際發生的默認提交。所以，如果您在取消按鈕之前移動保存按鈕，它將正常工作。

然而，要解決它的真正的方法就是增加type="button"到您的取消：

<button type="button" style="float: left;" data-bind="click: cancel">Cancel</button> 

http://jsfiddle.net/rniemeyer/HwbD2/11/