Question

我有一个foreach循环看起来像这样的瘦身版本。

<div data-bind="foreach: articles">
     <h1 data-bind="text: title"></h1>
</div>

现在我想添加一个带有绑定值的HTML注释。生成的HTML应该像这样呈现。

<div data-bind="foreach: articles">
     <h1 data-bind="text: myTitle">My title</h1>
     <!-- My property value -->
</div>

我想要“＆lt;！ - 我的财产价值 - - ＆gt;”来自当前foreach绑定中的属性。我希望通过简单的事情可以实现

<!-- myProperty -->

这是否可能，如果是，我该如何做到这一点？感谢。

修改我不喜欢的解决方案，并尝试用“好”的解决方案取而代之。

<div data-bind="foreach: articles">
     <h1 data-bind="text: myTitle">My title</h1>
     <p style="display:none;" data-bind="html: $root.commentValue(myProperty)"></p>
</div>

self.commentValue = function (valueToComment) {
            return '<!-- ' + valueToComment + ' -->';
        }

Answer 1

唯一有效的是这一个：

<div data-bind="html: '<!--' + WeightInGramms() + '-->'"></div>

但它有一个明显的副作用：还有一个div渲染。

解决方案是使用这样的虚拟元素：

<!-- ko html: "<!--" + WeightInGramms() + '--' + '>' --> 
<!-- /ko -->

它几乎可以运行，但是存在一个很大的问题：你不能在虚拟元素中使用html绑定（除了将'-->'转换为'--' + '>'的黑客攻击，以便它可以＃39} ; s不要与虚拟元素评论结束混淆）。

因此，唯一可行的解决方案是创建自己的custom binding，但将其设为valid to be used as a virtual element binding。

＆＃13;

ko.bindingHandlers['comment'] = {
    'init': function(elem, valueAccessor) {
        var value = ko.unwrap(valueAccessor());
        var comment = $('<!--'+value+'-->')[0];
        ko.virtualElements.setDomNodeChildren(elem, [comment]);
    },
    'update': function (elem, valueAccessor) {
        var value = ko.unwrap(valueAccessor());
        var comment = $('<!--'+value+'-->')[0];
        ko.virtualElements.setDomNodeChildren(elem, [comment]);
    }
};

ko.virtualElements.allowedBindings.comment = true;

var vm = {
    aComment: ko.observable("This is a comment")
}

ko.applyBindings(vm);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" data-bind="value: aComment"></div>

<!--ko comment: aComment --><!-- /ko -->

＆＃13;

它仍然不完美，因为您无法删除虚拟绑定标记，但它比添加真实标记以包含注释要清晰得多。请注意，自定义绑定实现使用特殊的ko.virtualElements API来支持虚拟元素。

如何在HTML注释中输出KnockoutJs值

1 个答案: