Knockout.js 文本绑定 - 折叠多个空格
Posted
技术标签:
【中文标题】Knockout.js 文本绑定 - 折叠多个空格【英文标题】:Knockout.js text binding - multiple spaces collapsed 【发布时间】:2012-11-04 17:49:34 【问题描述】:似乎在使用 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 中,空间在 Firefox、Chrome 和 IE9 中被压缩了。奇怪的是,虽然在我的应用程序中 IE9 不会压缩它们,但其他的却可以。
我的理解是 Knockout 使用 html 文本节点来呈现值。我在创建文本节点时发现了有关保留空格的相关问题:
http://www.webdeveloper.com/forum/showthread.php?193107-RESOLVED-Insert-amp-nbsp-when-using-createTextNode%28%29
Knockout 是否应该适当地处理转换空间?我真的不想为此使用自定义绑定处理程序。
我实际上是在一个选择中的显示文本的上下文中遇到这个的,并且在调试该问题时才发现它也与一个简单的文本绑定有关。我想选择问题是一样的。
【问题讨论】:
【参考方案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
【讨论】:
我同意 Knockout 不应该与可观察值混淆 - 但文本绑定本身不是只读的,所以我们只是在谈论确保值按预期呈现?但无论如何,感谢处理程序 - 因为只有少数情况会应用这些多个空格,所以使用自定义处理程序并不太麻烦。干杯。 好的,可以这么说,“预期”不是我预期的。不知何故,我一直没有注意到静态渲染的元素会像这样紧凑空间。哇!以上是关于Knockout.js 文本绑定 - 折叠多个空格的主要内容,如果未能解决你的问题,请参考以下文章
Knockout.js 将参数绑定到 Data-Target 返回对象而不是文本(手风琴)
如何使用 Knockout.js 将多个 View 绑定到单个 ViewModel