通过Knockout组合文本和html

Combining text and html by Knockout

本文关键字：html 文本 组合 Knockout 通过      更新时间：2023-09-26

这就是我想要构建html 的方式

<a href="#">John <i class="person"></i></a>

对于knockout.js，这就是我所做的。

<a data-bind="text:name"><i class="person"></i></a>

正如你所猜测的，由于文本绑定，锚的整个元素（而不仅仅是文本）被删除了，在这种情况下，锚内的整个标签都被删除了。我的解决方案如下。

<a data-bind="html: name() + '<i class="person"></i>'"></a>

在数据绑定中使用字符串concat和html是一种解决方案，但它有两大缺点name‘propery不安全，所以我们可以进行html注入。在数据绑定属性中反复编写html是很糟糕的。

另一个解决方案是

<a href="#"><span data-bind="text:name"></span><i class="person"></i></a>

我知道我们引入新的html标记只是为了解决问题。这是我发现最好的。

在knockout.js中，这个问题的已知解决方案是什么？

我们可以指定通过参数将文本而不是其中的整个元素更新为文本绑定吗？

还是更好的解决方案？

使用span是首选解决方案。如果文本绑定没有替换所有内容，那么它很难知道下次更改时要更新什么而不更新。如果您想始终处理元素的第一个子节点，那么您可以编写一个小的自定义绑定来提供帮助。

这是一个简单的prependText绑定。这将始终替换包含绑定的元素的第一个子节点。因此，您需要确保第一个节点至少是一个空间。

ko.bindingHandlers.prependText = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        //replace the first child
        element.replaceChild(document.createTextNode(value), element.firstChild);
    }        
};

像一样使用

<a href="#" data-bind="prependText: name"> <span> another element</span></a>

样品：http://jsfiddle.net/rniemeyer/5CfzH/

您也可以使用KO"无容器"表示法

<!-- ko text: YourProperty -->
<!-- /ko-->

其他绑定（如foreach）也可以这样做：请参阅第4部分

相关文章：