带有 HTML 到 PDF 转换器的 Knockout JS答案

【问题标题】：Knockout JS with HTML to PDF converter带有 HTML 到 PDF 转换器的 Knockout JS
【发布时间】：2012-08-29 19:16:51
【问题描述】：

我到处寻找答案，也许答案就是——它不存在，但希望有人有一些魔力。

我正在使用 Knockout 在一个页面上绑定多个表单。这一切都非常有效。然而，尝试将这些表单发送到 PDF 转换器已被证明是一项挑战。

呈现的 HTML 仍然显示为 Knockout-y。我尝试使用 $('body').html() 获取呈现的 DOM，但我仍然获得具有数据绑定属性的 HTML 标记。有没有办法获得最终呈现的纯 HTML 以传递给 PDF 转换器？

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案1】：

您可以在 afterRender 事件中将渲染的元素添加到 DOM 之前获取它们。请参阅http://knockoutjs.com/documentation/template-binding.html#note_3_using_afterrender_afteradd_and_beforeremove 了解更多信息。

如果您需要访问最终呈现的元素，请创建自定义绑定 (http://jsfiddle.net/nE7kK/)：

<body data-bind="getRenderedElements: viewModel">
    <ul data-bind="foreach: viewModel">
        <li data-bind="text: name"></li>
    </ul>
</body>

viewModel = ko.observableArray([
    { name: "Bungle", type: "Bear" },
    { name: "George", type: "Hippo" },
    { name: "Zippy", type: "Unknown" }
]);

ko.bindingHandlers.getRenderedElements = {
   update: function (element, valueAccessor) {
       // use timeout so browser has time to render the elements
       setTimeout(function() {
            var html = $(element).html();
            alert(html);
       }, 1000);
   }
};

ko.applyBindings(viewModel);

注意：如果您使用虚拟元素，您应该告诉 knockout 允许 getRenderedElements 绑定访问这些元素，请参阅：http://knockoutjs.com/documentation/custom-bindings-for-virtual-elements.html

【讨论】：

我对此进行了调查，但我不确定如何将其返回到 DOM 本身以呈现完整的文档以推送到 PDF 转换器。
除了输入文本字段外，效果很好。那些有点松鼠。感谢您的回答！