Question

我有一个HTML模板：

<script id="my-template" type="text/template">
  <div data-bind="text: value"></div>
</script>

我想将它绑定到模型并将结果作为字符串。

因此绑定到{ "value": "Some text" }会产生"<div data-bind="text: value">Some text</div>"。我需要它作为String的原因是将它作为参数传递给Bootstrap Tour。

似乎应该可以使用ko.renderTemplate或ko.applyBindings，但renderTemplate会给我一个memoized函数，applyBindings会修改DOM中的模板，这是我不想要的。< / p>

我还尝试克隆模板并绑定到克隆，但克隆的DOM节点似乎没有应用绑定。 JSFiddle of this attempt

Answer 1

ko.renderTemplate接受可能有用的afterRender回调。取自tutorial about rendering templates for Bootstrap modals：

ko.renderTemplate(
  "mytemplate",
  viewModel,
  {
    afterRender: function(nodes) {
      console.log("rendered!");
    }
  },
  target
);

这是一个快速而又脏的示例，它将呈现的结果显示为字符串：

＆＃13;

ko.bindingHandlers.templateToString = {
  init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

    ko.renderTemplate(
      "my-template",
      viewModel, {
        afterRender: function() {
          document.getElementById('result').innerText = element.innerHTML;
          element.innerHTML = null;
        }
      },
      element
    );

  }
};

ko.applyBindings({
  'value': 'Some text'
});

＆＃13;

pre {
    background-color: lightgrey;
    padding: 2rem;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<pre id="result"></pre>

<script id="my-template" type="text/template">
  <div data-bind="text: value"></div>
</script>

<div data-bind="templateToString"></div>

＆＃13;

如果您希望在不触及DOM或绑定之外的情况下使用renderTemplate，请改为创建DocumentFragment：

var fragment       = document.createDocumentFragment(),
    container      = document.createElement('div'),
    bindingContext = ko.contextFor(document.body);

fragment.appendChild(container);

ko.renderTemplate(
  "my-template",
  viewModel, {
    afterRender: function() {
      console.log(container.innerHTML);
    }
  },
  container
);

请注意，这可能是非惯用的Knockout代码，我建议在绑定中使用。

将knockout绑定应用于模板并将结果作为字符串获取

1 个答案: