Как создать и использовать Excel Web App с DurandalJS?

Question

Я пытаюсь добавить Excel Web App на сайт DurandalJS. По сути, я получаю объект JSON с сервера, преобразую его в <table>...</table> тег, чтобы Excel Web App мог понять это. Затем я хотел бы иметь возможность просматривать эту таблицу в Excel Web App (изменять размер столбцов, выбирать, сортировать, фильтровать и т. Д.).

Для начала, я пытаюсь самое простое из возможных решений - жестко ![<table />][1]:

1. Создан новый проект DurandalJS (используя шаблон на их сайте)
2. Заменено содержание welcome.html с помощью следующего кода, который я нашел на http://www.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>

Но Дюрандаль будет показывать только данные таблицы, игнорируя кнопку Excel. То же самое происходит, когда я пытаюсь переместить последнюю строку (<script/>) чтобы index.cshtml,

Любые идеи, как я могу иметь поведение, подобное Excel для просмотра этой таблицы в Durandal?

Спасибо!

PS: Мой настоящий проект работает на Durandal 1.2, но пока я приму любое решение, даже Durandal 2.0.

Answer 1

Durandal не отображает теги скрипта в представлениях. Чтобы отобразить их, вы должны использовать нокаутированные пользовательские привязки:

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>

Answer 2

Durandal не поддерживает несколько корней в одном файле представления (.html). Вы должны обернуть <a> тег и ваш <table> тег в одном <div> тег или <section> тег или что-то более высокого уровня.

Кроме того, вы должны переместить <script> как вы говорите, добавьте тег index.cshtml.

Наконец, используйте инструменты разработчика браузера, который вы используете, чтобы убедиться, что ресурс ExcelButton действительно загружается.