在敲出.js中为nl2br创建自定义绑定 [英] Creating a custom binding for nl2br in knockout.js

问题描述

我试图编写一个自定义绑定，以将"<p>"元素中的"/n"替换为"<br />".

I am trying to write a custom binding to replace "/n" with "<br />" within a "<p>" element.

我或多或少地了解了这个概念，但是我正在努力使它继续下去.谁能建议我要去哪里错了.我真的不想使用计算的可观察值，因为我想使用"/n"而不是"<br />"保留实际值.

I understand the concept more or less, but I'm stuggling to get it going. Can anyone suggest where I'm going wrong. I don't really want to use a computed observable, as I want to keep the real value using "/n" rather than "<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)
    }
};

推荐答案

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调用应该是:

---

Full Answer

First things first, the replace call should probably be:

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

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

Otherwise the new string gets discarded.

除此之外，我不建议直接设置像这样的元素值.依靠现有的处理程序(大概已经在各种浏览器中进行了很好的测试)来完成繁重的工作.参见 RP.尼迈耶(Niemeyer)关于该主题的博客文章(特别是第3项).

Apart from that, I wouldn't recommend setting the element value like that directly. Rely on the existing handlers (that presumably are well tested in various browsers) to do the heavy lifting. See R.P. Niemeyer's blog post on the subject (specifically item 3).

您可以使用 text绑定，它会从字面上渲染"<br />"，或者(如果您信任输入！) html绑定(如果要为<br />呈现换行符).后者看起来像这样:

You can use either the the text binding which will literally render "<br />" or (if you trust the input!) the html binding if you want to render a newline for the <br />. The latter looks like this:

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>

这篇关于在敲出.js中为nl2br创建自定义绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！