在knockout.js中为nl2br创建自定义绑定

Question

我正在尝试编写一个自定义绑定来替换＆＃34; /n＆＃34;用＆＃34; <br />＆＃34;在＆＃34; <p>＆＃34;元件。

我或多或少地理解了这个概念，但是我还是为了让它继续发展而努力。任何人都可以建议我出错的地方。我真的不想使用计算的observable，因为我想使用＆＃34; /n＆＃34;来保持真正的价值。而不是＆＃34; <br />＆＃34;。

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)
    }
};

Answer 1

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 />');

否则新字符串将被丢弃。

除此之外，我不建议直接设置元素值。依靠现有的处理程序（可能在各种浏览器中经过良好测试）来完成繁重的工作。请参阅有关主题的R.P. Niemeyer's blog post（特别是第3项）。

如果你想渲染，你可以使用字面渲染“<br />”的the text binding或（如果你信任输入！）the html binding <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>