Question

当它被绑定到HTML输入元素时，我想对knockout observable执行双向转换。更具体地说，我想替换“＆lt; BR＆gt;”复制到输入时使用“\ n”字符的字符串，并将“\ n”字符替换为“＆lt; BR＆gt;”复制回模型时的字符串。换句话说，我有以下两个要求：

当从knockout observable复制值时，它应该进行一次转换。
当输入中的值发生变化并将其复制回挖掘可观察时，它应该进行反向转换。

由于我正在使用knockout.mapping，我不想使用.extend（），而是宁愿使用自定义的bindingHandler。

我找到了许多例子，您可以将observable格式化为像DIV这样的只读元素。我发现了许多其他示例，您可以在其中修改输入到输入中的值。但这些都不适合我。我尝试过的所有东西总是导致转换只是以这种或那种方式工作，但不是两种方式成功。

这是我最近的尝试：

ko.bindingHandlers.htmlToTextValue = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
        var interceptor = ko.computed({
            read: function () {
                var valueObservable = valueAccessor();
                var value = valueObservable();
                var textValue = String(value)
                    .replace(/\<br\>/g, "\n")
                    .replace(/&gt;/g, '>')
                    .replace(/&lt;/g, '<')
                    .replace(/&#39;/g, "'")
                    .replace(/&quot;/g, '"')
                    .replace(/&amp;/g, '&');
                return textValue;
            },
            write: function (value) {
                var valueObservable = valueAccessor();
                var htmlValue = String(value)
                    .replace(/&/g, '&amp;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/\n/g, "<br>");
                valueObservable(htmlValue);
            }
            ,disposeWhenNodeIsRemoved: element
        });

        ko.applyBindingsToNode(element, { value: interceptor }, context);
    }
};

以下是它的用法：

<input type="textarea" data-bind="htmlToTextValue: Value" />

Answer 1

它不起作用，因为你只是设置init函数，所以它不会响应任何更新。尝试将更新选项添加到处理程序

ko.bindingHandlers.htmlToTextValue = {
    init: function(element, valueAccessor) {
        // your code
    },
    update: function(element, valueAccessor) {
        // your code
    }
}

Answer 2

这是文本和HTML之间双向绑定的工作解决方案：

ko.bindingHandlers.htmlToTextValue = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
        var interceptor = ko.computed({
            read: function () {
                var valueObservable = valueAccessor();
                var value = valueObservable();
                var textValue = String(value)
                    .replace(/<br>/gi, "\n")
                    .replace(/&gt;/gi, '>')
                    .replace(/&lt;/gi, '<')
                    .replace(/&#39;/gi, "'")
                    .replace(/&quot;/gi, '"')
                    .replace(/&amp;/gi, '&');
                return textValue;
            },
            write: function (value) {
                var valueObservable = valueAccessor();
                var htmlValue = String(value)
                    .replace(/&/gi, '&amp;')
                    .replace(/"/gi, '&quot;')
                    .replace(/'/gi, '&#39;')
                    .replace(/</gi, '&lt;')
                    .replace(/>/gi, '&gt;')
                    .replace(/\n/gi, "<br>");
                valueObservable(htmlValue);
            }
        });

        ko.applyBindingsToNode(element, { value: interceptor }, context);
    }
};

使用自定义绑定格式化挖空值

2 个答案: