How to Include text/html Scripts with Hot Towel

Question

I'm trying to familiarize myself with Hot Towel SPA template. I would like to implement inline editing after reading this article from Ryan Vanderpol.

Now I'm quite at a loss as to how to insert a script block of type 'text/html' into the section contents.

This is what I have in the section for my view (note the two script blocks inside).

<section>
    <h2 class="page-title" data-bind="text: title"></h2>

    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Company Name</th>
                <th>Last Name</th>
                <th>First Name</th>
                <th style="width: 50px; text-align:right;" />
            </tr>
        </thead>
        <tbody data-bind=" template: { name: templateToUse, foreach: customers }"></tbody>
    </table>        

    <script id="readTemplate" type="text/html">
        <tr>
            <td data-bind='value: CustomerID' ></td>
            <td data-bind='value: CompanyName' ></td>
            <td data-bind='value: LastName' ></td>
            <td data-bind='value: FirstName' ></td>
            <td class="buttons">
                <a class="btn" data-bind="click: edit" href="#" title="edit"><i class="icon-edit"></i></a>
                <a class="btn" data-bind="click: removeCustomer" href="#" title="remove"><i class="icon-remove"></i></a>
            </td>
        </tr>
    </script>

    <script id="editTemplate" type="text/html">
        <tr>
            <td><input data-bind='value: CustomerID' /></td>  
            <td><input data-bind='value: CompanyName' /></td>
            <td><input data-bind='value: LastName' /></td>
            <td><input data-bind='value: FirstName' /></td>
            <td class="buttons">
                <a class="btn btn-success" data-bind="click: save" href="#" title="save"><i class="icon-ok"></i></a>
                <a class="btn" data-bind="click: cancel" href="#" title="cancel"><i class="icon-trash"></i></a>
            </td>
        </tr>
    </script>
</section>

And this is my view model.

define(['services/logger'], function (logger) {
    function Customer(data) {
        var self = this;
        self.CustomerID = ko.observable(data.CustomerID);
        self.CompanyName = ko.observable(data.CompanyName);
        self.LastName = ko.observable(data.LastName);
        self.FirstName = ko.observable(data.FirstName);
    };

    function ViewModel() {
        var self = this;
        self.title = 'Customers';
        self.customers = ko.observableArray([]);
        self.selectedItem = ko.observable();

        self.edit = function (item) {
            self.selectedItem(item);
        };
        self.cancel = function () {
            self.selectedItem(null);
        };
        self.removeCustomer = function (customer) {
            // Code for deleting row
        }       
        self.save = function () {
            // Code for saving changes
        };      
        self.templateToUse = function (item) {
            return self.selectedItem() === item ? 'editTemplate' : 'readTemplate';
        };
    }

    var vm = new ViewModel();
    return vm;
});

When I run the application, I get an error that says "Cannot find template with ID readTemplate" when debugging it in Chrome.

How do I go about implementing my html templates in Hot Towel?

Thanks for any help.

Answer 1

We encountered the same issue this week at work with inline templates. Looks like Durandal doesn't play well with inline template.

Our solution as been to use external template, stored in file beside the main file, and then call them with the following line :

<!-- ko compose: { view: 'path/' + templateToUse + '.html', model: yourModel } -->

Might not be elegant but at least it's working.

Let me know if it sort out your problem :)