Knockout.js文本绑定-多个空格折叠

Question

似乎在使用Knockout的文本绑定时，多个空格变成了一个空格。例如：

<textarea data-bind="value: Notes"></textarea>
<p data-bind="text: Notes"></p>

函数VM() { this.Notes = ko.observable()；}

var vm = new VM()；

ko.applyBindings(vm)；

这里有一个小提琴来演示这一点：http://jsfiddle.net/9rtL5/

我发现在jsfiddle中，空间在火狐，Chrome和IE9中被压缩了。奇怪的是，在我的应用程序中，IE9没有压缩它们，但其他应用程序却压缩了它们。

我的理解是Knockout使用HTML文本节点来呈现该值。在创建文本节点时，我发现了一个关于保留空格的相关问题：

http://www.webdeveloper.com/forum/showthread.php?193107-RESOLVED-Insert-amp-nbsp-when-using-createTextNode%28%29

Knockout是否应该适当地处理转换空间？我真的不想为此使用自定义绑定处理程序。

实际上，我在select中显示文本的上下文中遇到了这个问题，并且在调试该问题时才发现它也与一个简单的文本绑定有关。我假设select问题是相同的。

Answer 1

您正在观察的是正常行为。当在某些元素中呈现时，空白会被修剪。knockout不应该做任何自动替换，如果我想用Knockout将字符串发送到带有前导/尾随空格的服务器，最好使用这些空格。

您应该创建一个绑定处理程序，将空格替换为不换行的空格，以便可以以这种方式呈现它。

ko.bindingHandlers.spacedtext = {
    replaceSpace: function (str) {
        return new Array(str.length + 1).join('\xA0');
    },
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var spacedValue = ko.computed(function () {
            var value = ko.utils.unwrapObservable(valueAccessor()),
                text = value && value.toString();
            return text && text.replace(/^\s+|\s+$/gm, ko.bindingHandlers.spacedtext.replaceSpace);
        });
        ko.applyBindingsToNode(element, { text: spacedValue });
    }
};

Demo