使用 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);
        }
    }
};

我正在导入并在我的视图模型中注册它：

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);
})();

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

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

有谁知道在使用 Webpack 加载模块时如何使 KO 自定义绑定器工作？

Answer 1

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

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

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

然后在 webpack 源代码中 app.js 我只是在文件顶部做一个简单的要求。无需在那里设置对象。

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);
})();

你的 include 应该使用 const 而不是 let，它们没有理由会发生变异。

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

custom handler not working when using webpack

javascript

knockout.js

webpack

babeljs

babel-polyfill