Knockout 在另一个页面中加载当前视图模型和 html答案

【问题标题】：Knockout load current view model and html in another pageKnockout 在另一个页面中加载当前视图模型和 html
【发布时间】：2016-02-11 04:54:08
【问题描述】：

我有一个 Html 页面，其中包含一个很大的淘汰视图模型和很多复杂性。访问者要求页面计算一些在服务器中计算的东西（ajax 调用）并返回绑定到视图模型的 json 数据。

之后页面中的所有更改都是通过淘汰完成的。 HTML 中的某些 div 由淘汰赛填充和处理。我想做的是单击按钮打开一个新页面，其中包含新页面内某个 div 的内容。我的观点是让用户能够通过浏览器打印他想要的任何 div，但不会看到页面上的其他内容。

这可能吗？我不介意新页面是否只有 viewModel 的 html 输出或 viewModel 本身。我只想要输出但不重定向到其他页面。

谢谢

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

要能够在页面中打印单个 div，您无需在新页面中打开它。使用print 媒体查询要容易得多。这种技术的几个示例遍布 SO：

Print the contents of a DIV

Print <div id=printarea></div> only?

How to print only one div content from html page using print button

但是，如果您想按照要求的方式进行操作，您仍然可以这样做：

How to open a new window and insert html into it using jQuery?

Open window in JavaScript with HTML inserted

【讨论】：

我试过这个解决方案stackoverflow.com/a/2255438/198893。但是，例如，如果我选中 div 内的复选框，则复选框显示为已选中，但寡妇已打开且未选中复选框。好像 jquery('#id').html() 没有得到改变
没有看到任何代码是不可能帮助你的。你能用一些代码更新你的问题吗？谢谢！

【解决方案2】：

例如，在单击时，敲除会绑定一些新值并显示一个 div。 div的代码是：

<ul class="list-unstyled coverages" data-bind="foreach: optionalNonGroupedCoverages">
                    <li>
                        <input type="checkbox" data-bind="checked: IsChecked" value=""/>
                        <span data-bind="text: Description"></span>
                        <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                tooltip: {title: TooltipText, placement: 'right'}"></i>
                    </li>
                </ul>

当发生绑定时，它会生成以下 html：

<ul class="list-unstyled coverages" data-bind="foreach: optionalNonGroupedCoverages">
                        <li>
                            <input type="checkbox" data-bind="checked: IsChecked">
                            <span data-bind="text: Description">test</span>
                            <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                    tooltip: {title: TooltipText, placement: 'right'}" data-original-title="" title=""></i>
                        </li>

                        <li>
                            <input type="checkbox" data-bind="checked: IsChecked" value="">
                            <span data-bind="text: Description">test1</span>
                            <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                    tooltip: {title: TooltipText, placement: 'right'}" data-original-title="" title=""></i>
                        </li>

                        <li>
                            <input type="checkbox" data-bind="checked: IsChecked">
                            <span data-bind="text: Description">test2</span>
                            <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                    tooltip: {title: TooltipText, placement: 'right'}" data-original-title="" title=""></i>
                        </li>

                        <li>
                            <input type="checkbox" data-bind="checked: IsChecked">
                            <span data-bind="text: Description">test3</span>
                            <i class="fa fa-info-circle" data-bind="visible: TooltipText,
                                    tooltip: {title: TooltipText, placement: 'right'}" style="display: none;" data-original-title="" title=""></i>
                        </li>
                    </ul>

所以当我用 :

抓取 html 时

var html = $('#selectedPackage').html();

        var mywindow = window.open('', 'my div');
        mywindow.document.write('<html><head><title>my div</title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(html);
        mywindow.document.write('</body></html>');

        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        //mywindow.print();
        //mywindow.close();

        return true;

出现 html，但如果选中了一个复选框，它在新窗口中显示为未选中。我认为这与未设置的输入框中的属性值有关。

【讨论】：