将敲除绑定应用于模板并以字符串形式获取结果

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>"。我需要它作为字符串的原因是将它作为参数传递给 Bootstrap Tour.

似乎可以使用 ko.renderTemplate 或 ko.applyBindings，但是 renderTemplate 给了我一个记忆函数并且 applyBindings 修改了 DOM 中的模板，我不知道不想。

我也试过克隆模板并绑定到克隆，但克隆的 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
);

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

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'
});

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

<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>

如果您希望在不接触 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 代码，我建议在绑定中使用。

将敲除绑定应用于模板并以字符串形式获取结果

Apply knockout bindings to template and get result as a string

javascript

jquery

knockout.js