Question

我正在尝试在HTML视图中嵌入PDF文档，其中Knockout ViewModel提供文档的URL。我认为正确的HTML元素是<object>，所以我有以下观点：

<div class="documentviewerpdf">
    <object data-docType="pdf" data-bind="attr: { 'data': EmbedPDFLink }" type="application/pdf" width="100%" />
</div>

以及以下作为视图模型：

function AppViewModel() {
    this.EmbedPDFLink = "http://acroeng.adobe.com/Test_Files/browser_tests/embedded/simple5.pdf";
}

ko.applyBindings(new AppViewModel());

jsFiddle

这会在Chrome，Chrome Canary（均使用原生Chrome PDF插件）和Firefox 27（Adobe Reader XI插件）中显示PDF，但是所有三种浏览器都会在屏幕顶部的栏中显示警告。 Chrome为黄色，表示为Could not load Chrome PDF Viewer，而Firefox为灰色，带有信息图标，表示this PDF document might not be displayed correctly。相同的代码在IE9上加载插件为空。

如果我将data-bind属性替换为包含PDF文档的硬编码网址的直接data属性，则Chrome和Firefox会正确显示，而IE9根本不显示任何内容，甚至不显示空插件

我已尝试使用data中的<param>元素设置<object>属性，但在任何这些浏览器中都不起作用。

我也尝试过使用<embed>标签，尽管在IE9中有效，但它给出了类似的结果，但这似乎并不像语义上的正确。但是，embed element documentation声明任何属性都传递给插件 - 假设元素非常相似，是否可能将data-bind属性传递给PDF插件，并导致此问题？

硬编码和data-bind版本之间标记的唯一区别似乎是后者存在data-bind属性，所以我认为这会导致插件出现问题，正确设置data URL属性。

有没有办法使用Knockout在对象上设置data属性，而不会在那里留下data-bind属性？还有其他人知道要避免这个问题吗？

Answer 1

我不是百分百肯定，但我认为这就是正在发生的事情。

你的html标记有一个<object data-docType='pdf' /> - 所以在DOM加载后立即就可以了。但是，它的data属性使用KO绑定。因此，在加载<object> html元素时，在加载DOM时，KO绑定尚未应用，您将收到错误。

我测试了它，我在Javascript中构建了<object> html标记，然后将其添加到DOM中，错误就消失了。希望它有所帮助，请参阅fiddle

function AppViewModel() {
    this.EmbedPDFLink = "http://acroeng.adobe.com/Test_Files/browser_tests/embedded/simple5.pdf";

    this.addPdf = function () {
        var html = "<object data-docType=\"pdf\" data=\"" + this.EmbedPDFLink + "\"                 type=\"application/pdf\" width=\"100%\" />";
        $('.documentviewerpdf').append(html);
    };
}

ko.applyBindings(new AppViewModel());

和HTML

<button data-bind="click: addPdf">Load PDF</button>
<div class="documentviewerpdf"></div>

修改

这是一个更新的小提琴，当你到达页面时会自动加载PDF（更多符合你想要的最终结果，我认为）。我在IE，FIrefox和Chrome（最新版本）中测试过，没有收到任何错误。

Fiddle

Answer 2

使用绑定隐藏所有属性，直到评估源路径。该插件会看到您的其他属性，并认为您有一个错误的元素。

 data-bind="attr: { 'each-attribute-here': true }"

http://jsfiddle.net/C8txY/8/

在评估价值之前，Chrome会过快地识别您的PDF。将插件正在寻找的所有属性绑定到绑定中。

您还可以在此处使用自定义绑定来添加属性并传入PDF的位置值。这个自定义绑定处理程序不应该直接将HTML注入DOM。

如何在没有PDF插件发出警告的情况下将PDF文档嵌入KnockoutJS模板？

2 个答案:

修改