我在让 Knockout 绑定处理程序与 Durandal 一起工作时遇到问题。我目前有一个名为 bindings.js 的文件，我通过 RequireJS 将其加载到名为 todo.js 的视图模型中。由于某种原因，绑定处理程序似乎没有附加。添加待办事项并在键盘上按回车后，Enter 键不起作用。任何帮助表示赞赏。该项目的代码位于https://github.com/robksawyer/durandal-todo。随意分叉它。还值得注意的是，大部分 Knockout 代码来自TodoMVC Knockout+Require项目。
下面是 bindings.js 文件的片段。文件位于https://github.com/robksawyer/durandal-todo/blob/master/scripts/bindings.js。
// a custom binding to handle the enter key (could go in a separate library)
ko.bindingHandlers.enterKey = {
init: function (element, valueAccessor, allBindingsAccessor, data) {
var wrappedHandler, newValueAccessor;
system.log("ENTER KEY PRESSED");
// wrap the handler with a check for the enter key
wrappedHandler = function (data, event) {
if (event.keyCode === config.ENTER_KEY) {
valueAccessor().call(this, data, event);
}
};
// create a valueAccessor with the options that we would want to pass to the event binding
newValueAccessor = function () {
return {
keyup: wrappedHandler
};
};
// call the real event binding's init function
ko.bindingHandlers.event.init(element, newValueAccessor, allBindingsAccessor, data);
}
};
这是连接 bindingHandler 的 HTML 片段。在https://github.com/robksawyer/durandal-todo/blob/master/views/todos.html 提交文件。
<header id="header">
<h1>todos</h1>
<input id="new-todo" type="text" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add" placeholder="What needs to be done?" autofocus>
</header>
最后，这是加载视图模型的片段。文件位于https://github.com/robksawyer/durandal-todo/blob/master/viewmodels/todos.js。
define(
[
'knockout',
'jquery',
'durandal/app',
'durandal/system',
'scripts/dataservice',
'scripts/model',
'scripts/config',
'scripts/bindings',
'scripts/native'
],
function(ko, $, app, system, dataservice, model, config) {
'use strict';
var self = this;
var todos = ko.observableArray([]),
current = ko.observable(), // store the new todo value being entered
showMode = ko.observable('all');
// add a new todo, when enter key is pressed
var add = function() {
var current = current().trim();
if (current) {
todos.push(new model.Todo(current));
current('');
}
};
...
感谢你的宝贵时间。