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.

Tullus

Are there any errors in your browser's javascript console? – Omission

can you post your full code. What you have shown here should work. Also, why are you applying app to this? just create a new variable. – Cromagnon

UPDATE: because of what both of you said, I started investigating carefully anywhere else in the code that might be causing problems. There was an old data-bind from a previous author sitting nested near the bottom of the modal's DOM that was causing a console error that the data-bind is dead/doesn't go to anything (why did I not notice it before? Alas, you live and you learn). Once I commented it out, I started getting a console error saying it 'Cannot find template with ID tableTemplate'. I will continue investigating. – Tullus

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.

Territorialize

Answer 2

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>

Tempered

I cannot get the template approach to work, but your alternative does. Thank you! Gave your post a well deserved +1. Although, I do wish I knew why the template approach is not working in case there is a situation in the future where I would really need to use it. – Tullus

Not sure, but I'm going to guess that the template markup you showed is in a Durandal module, and perhaps 'template' binding does not find templates the way a straight Knockout app might. You may want to try this in a Knockout sample without Durandal to see. – Tempered

Yeah, it is in a Durandal module, and a good portion of the Knockout documentation and examples only work with a simplified straight-up KO viewModel. Unfortunately, Durandal does not have as much documentation and asked questions for common tasks such as these. – Tullus

Answer 3

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

Ullund

Answer 4

You should try compose of durandal. Document here.

Dreamworld