自定义绑定无法从 Knockout 2.3 更新到 3.3答案

【问题标题】：Custom Binding not working updating from Knockout 2.3 to 3.3自定义绑定无法从 Knockout 2.3 更新到 3.3
【发布时间】：2015-11-10 16:57:33
【问题描述】：

我的 Windows 8.1 应用在 Knockout 2.3 上运行良好，但在更新到 3.3 后，我的自定义绑定中似乎出现了错误的上下文。

首先是我如何在应用程序的命令栏中为单个元素应用绑定：

var cmdArray = [];
    var commandIsRunning = function() {
        return _.any(cmdArray, function(command) {
            return command.isRunning();
        });
    };
    _.each(_bottomCommands, function (row) {
        if(row.command) {
            // command wrapper
            var commandWrapper = ko.command({
                action: function() {
                    var rowCommand = row.command();
                    if (rowCommand) {
                        return rowCommand();
                    }
                    return WinJS.Promise.as();
                },
                canExecute: function() {
                    var rowCommand = row.command();
                    if (rowCommand) {
                        return rowCommand.canExecute() && !commandIsRunning();
                    }
                    return false;
                }
            });
            cmdArray.push(commandWrapper);

            //Bind the command
            var element = document.querySelector('#' + row.id);
            if (element) {
                element.setAttribute('data-bind', 'command: $data');
                ko.applyBindings(commandWrapper, element);
            }
        }
    });

这是我的自定义绑定代码

ko.bindingHandlers.command = {
            init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                var command = ko.utils.unwrapObservable(valueAccessor());
                ko.bindingHandlers.click.init.call(this, element, ko.observable(command), allBindingsAccessor, viewModel, bindingContext);
            },
            update: function (element, valueAccessor, allBindingsAccessor) {
                var command = ko.utils.unwrapObservable(valueAccessor());
                ko.bindingHandlers.enable.update.call(this, element, command.canExecute, allBindingsAccessor);
            }
        };

问题出在：

ko.bindingHandlers.enable.update.call(this, element, command.canExecute, allBindingsAccessor);

canExecute 未定义，我认为这是因为我没有在 init 和 update 处理程序中获得正确的上下文。那么我在代码中做错了什么？代码再次在 Knockout 2.3 中工作，所以这可能是一个 Knockout 问题吗？

更新： 我创建了 jsFiddle 来显示问题。它包含ko.command 的定义，因为我认为这可能是问题的原因 JSFiddle

【问题讨论】：

您能否将其包含在代码 sn-p 中以便我们可以使用它？
@JotaBe 我更新了我的问题。
您可能需要稍微调整一下您的小提琴 - 对于淘汰赛 3 和 2.3，我看到“无法处理绑定“命令：函数 (){return $data}”，消息：d 是不是函数”
@JamesThorpe 实际上这正是我的问题。我在我的小提琴代码中放了两个调试器。如果你停在第二个，你会看到 command.canExecute 是 undefined 。这就是你得到错误的原因
command.canExecute 在两个版本的淘汰赛中的第二个调试器上未定义 - command 本身似乎是一个返回承诺的函数

标签： javascript knockout.js data-binding windows-8.1

【解决方案1】：

该错误是由于 Knockout 3.x 绑定到函数的方式不同引起的。在 2.x 中，您可以直接绑定到函数，但在 3.x 中，Knockout 调用该函数来获取视图模型。您仍然可以绑定到 Knockout 3.x 中的函数，但您需要将其包装在 observable 或另一个函数中。

ko.applyBindings(function() { return commandWrapper }, element);

https://jsfiddle.net/mbest/nrb97g7e/38/

【讨论】：