Question

我使用Knockout绑定一个元素：

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

但是，someTextProperty中的文本要转换为与ViewModel及其功能之一进行交互的超链接。

是否有一种简单，受支持的方式在动态呈现的内容呈现后对其执行绑定？在foreach中是否有一个afterRender绑定（这需要很多逻辑来确保我定位正确的元素）唯一可用的东西？

编辑：

在我的真实场景中，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.

...但直接在链接中引用视图模型功能感觉有点脏，所以我正在寻找更好的方法。

Answer 1

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

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>

淘汰赛：在与ViewModel函数绑定的渲染内容中创建链接的最佳方式

1 个答案: