knockoutjs представить привязки не обрабатывает ввод ключа правильно
У меня есть диалог jQuery ui с привязкой knockoutjs submit к форме. Диалог можно закрыть, нажав кнопку Отмена, нажав кнопку Закрыть в строке заголовка диалога, нажав кнопку escape или нажав кнопку Сохранить. Мое намерение состоит в том, что события отмены, экранирования и закрытия строки заголовка должны закрыть диалог без применения каких-либо действий из него, в то время как нажатие enter или нажатие кнопки "Сохранить" должно выполнить действие диалога. Все работает, как задумано, кроме входа ключ, который приводит к событию отмены, а не к событию отправки.
Я создал jsfiddle, Чтобы проиллюстрировать это, и включаю код ниже для referernce.
Приношу свои извинения за подробный код...Ген
<!-- 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());
1 ответ:
Если кнопка не имеет типа, то браузер делает предположение, что ее можно считать кнопкой
submit
. Итак, когда вы нажметеenter
, Метод кнопки отмены выполняется и предотвращает фактическое выполнение отправки по умолчанию. Таким образом, если бы вы переместили кнопку сохранения перед кнопкой отмены, она работала бы правильно.Однако реальный способ исправить это - просто добавить
type="button"
к вашей отмене:<button type="button" style="float: left;" data-bind="click: cancel">Cancel</button>