javascript - knockout : Best Way To Create Links In Rendered Content Bound To ViewModel Functions

Question

我正在使用 Knockout 绑定(bind)元素:

<div data-bind="foreach: someCollection">
    <p data-bind="html: someTextProperty"></p>
</div>

但是，我想将 someTextProperty 中的文本转换为与 ViewModel 及其函数之一交互的超链接。

是否有一种简单且受支持的方法可以在呈现后对动态呈现的内容执行绑定(bind)？ foreach 中的 afterRender 绑定(bind)(这需要大量逻辑来确保我定位到正确的元素)是唯一可用的吗？

编辑:

在我的现实场景中，someTextProperty 看起来像这样:

This is a paragraph with some <tag data-val="foo">tagged</tag> text.

...我目前正在将其转换为这样的内容:

This is a paragraph with some <a onclick="viewModel.DoSomething(\'foo\')">tagged</a> text.

...但是直接在链接中引用 View 模型函数感觉有点脏，所以我正在寻找更好的方法。

Answer 1

好吧，它需要一个自定义绑定(bind)处理程序，它包装 html 绑定(bind)并将绑定(bind)应用于新代码。我刚刚做了一个神奇的计算，将原始数据转换为所需的 html，并绑定(bind)计算。

ko.bindingHandlers.boundHtml = {
  update: function(element, valueAccessor, allBindingsAccessor, data, context) {
    ko.bindingHandlers.html.update(element, valueAccessor, allBindingsAccessor, data, context);
    ko.utils.arrayForEach(element.children, function(node) {
      console.debug("Bind", node);
      ko.applyBindingsToNode(node, context);
    });
  }
};

data = 'This is a paragraph with some <tag data-val="foo">tagged</tag> text.';

function myTransform() {
  return 'This is a paragraph with some <a data-bind="click: DoSomething.bind(null, \'foo\')">tagged</a> text.';
}

vm = {
  someTextProperty: ko.observable(data),
  transformed: ko.computed({
    deferEvaluation: true,
    read: myTransform
  }),
  DoSomething: function(arg) {
    console.debug("Doing something with", arg);
  }
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="boundHtml: transformed"></div>