Durandal/Knockout Template Binding Not Inserting

Question

I am currently trying to propagate a table row <tr> template into a <tbody> tag. Here is an example:

HTML:

<table>
    <tbody data-bind="template: { name : 'tableTemplate', foreach : tableRow }">
    </tbody>
</table>
<script type="text/html" id="tableTemplate">
    <tr>
        <!-- First Name -->
        <td data-bind="text: firstName"></td>
        <!-- Last Name -->
        <td data-bind="text: lastName"></td>
    </tr>                        
</script>

DurandalJS:

define(function(require) {
    var self = this;
    self.app = require('durandal/app');

    return {
       tableRow: ko.observableArray([
           { firstName: "DemoFirstName" , lastName: "ExampleLastName" },
           { firstName: "ExampleFirstName", lastName: "DemoLastName" }
       ]);

    //viewAttached and other non-applicable console log functions here
    };
});

Everything in the HTML will properly data-bind until it hits the table; all data-binds afterwards become dead.

I am rather new to Durandal, and am learning as I go.

Answer 1

I ran into the same problem, and I dug up the answer on the Durandal google group. I posted the results here on my question. KO cannot find template with ID

Basically you can't use named/ID'd Knockout templates yet, they're not supported. Support may come soon, according to the Durandal devs on their newsgroup. The workaround is to use either inline, or Durandal's compose functionality.

Answer 2

KO Templates do not seem to work well with Durandal - use View Composition instead (The creator of Durandal posts about it here) -https://github.com/BlueSpire/Durandal/pull/50

Some more blurb here: KO cannot find template with ID

Answer 3

You should try compose of durandal. Document here.

Answer 4

Might want to try this instead of the template approach:

<table>
  <tbody data-bind="foreach: tableRow">
    <tr>
      <!-- First Name -->
      <td data-bind="text: firstName"></td>
      <!-- Last Name -->
      <td data-bind="text: lastName"></td>
    </tr>                        
  </tbody>
</table>