knockoutjs onay değil işleme girin anahtarı düzgün bir şekilde girin

Question

Bir javascript ui iletişim kutusu ile bir formda ciltleme gönderin. İletişim kutusu, iptal düğmesine basarak, diyalog başlık çubuğundaki kapat düğmesine basarak, kaçarak ya da kaydet düğmesine basarak kapatılabilir. Amacım, iptal, kaçış ve başlık çubuğu kapanış olaylarının, herhangi bir eylemi uygulamadan diyaloğu kapatması gerektiğidir, oysa girme veya 'kaydetme' düğmesine basılması iletişim kutusunu gerçekleştirmelidir. Her şey, bir gönderim etkinliğinden ziyade bir iptal olayıyla sonuçlanan giriş anahtarı dışında amaçlandığı şekilde çalışır.

Bunu göstermek için bir jsfiddle oluşturdum ve aşağıdakini aşağıdaki kod için ekleyin. Ayrıntılı kodu için

Özürlerimi ...

Gen

<!-- 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 aşağıdaki gibidir: Bir düğme tarayıcı sonra, bir tür yoktur

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

ise submit düğmesinin kabul edilebileceği varsayımını yapar. Yani, enter'a bastığınızda, iptal düğmesinin yöntemi yürütülüyor ve varsayılan gönderimin gerçekten olmasını engelliyor. Yani, İptal düğmesine basmadan önce Kaydet düğmesini hareket ettirecekseniz, düzgün bir şekilde çalışırdı.

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

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