javascript - Durandal 的 ko.bindingHandler 问题

Question

我在让 Knockout 绑定(bind)处理程序与 Durandal 一起工作时遇到问题。我目前有一个名为 bindings.js 的文件，我正在通过 RequireJS 将其加载到名为 todo.js 的 View 模型中。出于某种原因，绑定(bind)处理程序似乎没有附加。添加待办事项并按键盘上的回车键后，Enter 键不起作用。任何帮助表示赞赏。该项目的代码位于 https://github.com/robksawyer/durandal-todo。 .随意 fork 它。还值得注意的是，大部分 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>

最后，这是加载它的 View 模型中的一个片段。文件位于 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('');
        }
    };
    ...

再次感谢您的宝贵时间。

Answer 1

Binding.js 不是 AMD 格式，所以我建议您在加载 knockout 之后加载它，而不是将其声明为依赖项。 scripts/native 是 AMD 格式吗？

define(
    [
    //'knockout', // Durandal expects knockout and $ loaded via script tag,
    //'jquery',   // no need to define them as deps as well
    'durandal/app', 
    'durandal/system', 
    'scripts/dataservice', 
    'scripts/model',
    'scripts/config',
     //'scripts/bindings',
    'scripts/native' // remove if not in AMD format
    ], 
    function(app, system, dataservice, model, config) {
    'use strict';