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>