Question

我正在尝试将Excel Web App添加到DurandalJS网站。基本上，我从服务器获取一个JSON对象，将其转换为<table>...</table>标记，以便Excel Web App可以理解它。然后，我希望能够使用Excel Web App查看该表（调整列，选择，排序，过滤等）。

首先，我正在尝试最简单的解决方案 - 硬编码![<table />][1]：

创建了一个新的DurandalJS项目（使用their website上的模板）
使用我在ExcelMashup.com上找到的以下代码替换welcome.html的内容：

<a href="#" name="MicrosoftExcelButton" data-xl-tableTitle="My Title" data-xl-buttonStyle="Standard" data-xl-fileName="Book1" data-xl-attribution="Data provided by MY Company" ></a>

<table> ... </table>

<script type="text/javascript" src="https://r.office.microsoft.com/r/rlidExcelButton?v=1&kip=1"></script>

但Durandal只会显示表数据，忽略Excel按钮。当我尝试将最后一行（<script/>）移动到index.cshtml时，会发生同样的事情。

This is how it looks on Durandal

任何想法如何在Durandal下查看该表时有类似Excel的行为？

谢谢！

P.S。：我的真实项目正在研究Durandal 1.2，但暂时我会采取任何解决方案，甚至是Durandal 2.0。

Answer 1

Durandal不支持单个视图文件（.html）中的多个根。您需要将<a>标记和<table>标记包装在单个<div>标记或<section>标记或更高级别的标记中。

此外，正如您所说，必须将<script>标记移动到index.cshtml。

最后，使用您正在使用的浏览器的开发工具来确保实际加载ExcelButton资源。

Answer 2

Durandal不会在视图中呈现脚本标记。要渲染它们，你应该使用knockout custom bindings：

ko.bindingHandlers.excelScript = {
  update: function( element, valueAccessor, allBindingsAccessor, viewModel, bindingContext){
    $(element).html('<script type="text/javascript" src="https://r.office.microsoft.com/r/rlidExcelButton?v=1&kip=1"></script>');
  }
};

在您的视图中使用它：

<div data-bind="excelScript"></div>

如何使用DurandalJS创建和使用Excel Web App？

2 个答案: