javascript - 使用 webpack 时自定义处理程序不起作用

Question

我有一个自定义处理程序，用于获取单选按钮检查值:

export const radioChecked = {
    init: function (element, valueAccessor, allBindingsAccessor,
        viewModel, bindingContext) {
        var value = valueAccessor();
        var newValueAccessor = function () {
            return {
                change: function () {
                    value(element.value);
                }
            }
        };
        ko.bindingHandlers.event.init(element, newValueAccessor,
            allBindingsAccessor, viewModel, bindingContext);
    },
    update: function (element, valueAccessor, allBindingsAccessor,
        viewModel, bindingContext) {
        if ($(element).val() == ko.unwrap(valueAccessor())) {
            setTimeout(function () {
                $(element).closest('.btn').button('toggle');
            }, 1);
        }
    }
};

我正在将其导入并注册到我的 View 模型中:

let ko = require('knockout');
let radioChecked = require('../general/handler/radioChecked');

(function () {
    ko.bindingHandlers.radioChecked = radioChecked;

    var ViewModel = function () {
        var self = this;

        self.currentView = ko.observable();
    }

    var viewModel = new ViewModel();
    ko.applyBindings(viewModel);
})();

Binder 仅在初始加载时工作，但是，当单击单选按钮时，不会触发 Binder 更新。

这是迁移到 webpack + babel-loader 之前的工作文件。

有人知道如何让 KO 自定义绑定(bind)器在使用 Webpack 加载模块时工作吗？

Answer 1

我有一个名为 Knockout-bindings.js 的文件。我的所有自定义绑定(bind)都在该文件夹中

// -- Contents of knockout-bindings.js -- //
var ko = require('knockout');

ko.bindingHandlers.datePicker = {...}
ko.bindingHandlers.editableText = {...}
ko.bindingHandlers.numericText = {...}

然后在 webpack 源 app.js 中，我只是在文件顶部直接进行 require 操作。无需在那里设置对象。

const ko = require('knockout');
require('./assets/js/knockout-bindings.js')

(function () {
    var ViewModel = function () {
        var self = this;

        self.currentView = ko.observable();
    }

    var viewModel = new ViewModel();
    ko.applyBindings(viewModel);
})();

您的包含应该使用 const 而不是 let，它们不应该有变异的原因。