3

我正在尝试编写一个自定义绑定以在“ ”元素中将“ /n”替换为“”。<br /><p>

我或多或少地理解了这个概念，但我正在努力实现它。谁能建议我哪里出错了。我真的不想使用计算出的 observable，因为我想使用“ /n”而不是“ <br />”来保持真实值。

ko.bindingHandlers.nl2br = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var field = valueAccessor();
        field.replace(/\n/g, '<br />');
        $(element).val(field)
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var field = valueAccessor();
        field.replace(/\n/g, '<br />');
        $(element).val(field)
    }
};
4

1 回答 1

6

TL;DR 答案

ko.bindingHandlers.nl2br = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var field = ko.utils.unwrapObservable(valueAccessor());
        field = field.replace(/\n/g, '<br />');
        ko.bindingHandlers.html.update(element, function() { return field; });
    }
};

完整答案

首先，replace电话应该是：

field = field.replace(/\n/g, '<br />');

否则，新字符串将被丢弃。

除此之外，我不建议直接设置元素值。依靠现有的处理程序（大概在各种浏览器中经过良好测试）来完成繁重的工作。请参阅RP Niemeyer 关于该主题的博文（特别是第 3 项）。

如果要为. _text _ _ _ _ _ _ 后者看起来像这样：<br />html<br />

ko.bindingHandlers.nl2br = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var field = ko.utils.unwrapObservable(valueAccessor());
        field = field.replace(/\n/g, '<br />');
        ko.bindingHandlers.html.update(element, function() { return field; });
    }
};

ko.applyBindings({ description: ko.observable("This is\nSparta!") });
p, pre { background-color: #dde; margin: 4px 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<strong>Text version in &lt;p&gt;:</strong>
<p data-bind="text: description"></p>
<hr />
<strong>Text version &lt;pre&gt;:</strong>
<pre data-bind="text: description"></pre>
<hr />
<strong>NL2BR version in &lt;p&gt;:</strong>
<p data-bind="nl2br: description"></p>

于 2013-08-08T11:17:12.797 回答