2

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

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 自定义绑定器工作？

4

1 回答 1

2

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

// -- 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，它们不应该有变异的原因。

于 2017-10-11T17:52:26.023 回答