How to create and use an Excel Web App with DurandalJS?

Question

I'm trying to add an Excel Web App to a DurandalJS website. Basically, I get a JSON object from the server, will transform it into a <table>...</table> tag so that Excel Web App can understand it. Then I'd like to be able to view that table with the Excel Web App (resize columns, select, sort, filter, etc).

To start off, I'm trying the simplest solution possible - hardcoded ![<table />][1]:

1. Created a new DurandalJS project (using the template on their website)
2. Replaced the content of welcome.html with the following code I found on ExcelMashup.com:

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

But Durandal will only show the table data, ignoring the Excel button. Same thing happens when I try moving the last line (<script/>) to index.cshtml.

Any ideas how can I have an Excel-like behavior to view that table under Durandal?

Thanks!

P.S.: My real project is working on Durandal 1.2 but for the time being I'll take any solution, even Durandal 2.0.

Answer 1

Durandal doesn't render script tags within views. To render them, you should use 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>');
  }
};

Use it in your view:

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

Answer 2

Durandal does not support multiple roots in a single view file (.html). You need to wrap your <a> tag and your <table> tag in a single <div> tag, or <section> tag, or something higher-level.

Also, you must move the <script> tag to index.cshtml, as you say.

Finally, use the dev tools of the browser you're using to make sure the ExcelButton resource is actually loading.