Knockout Templates with Wijmo

Question

I am trying to dynamically add a tab to a Wijmo tabs with Knockout, but I get an exception after I apply my binding

addSingleExecution: (execution) ->
      tabName =  "#tabs-#{@tabCounter}"
      tabs  = $(@targetDomElement).wijtabs(
        tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>'
        add: (event,ui) ->
          $(ui.panel).append('<div data-bind="template: { name: singleExecutionTemplate }"/>')
          $(ui.tab).siblings('span.ui-icon-close').on('click', null,self, (event)->
            index = $('li', tabs).index($(this).parent());
            tabs.wijtabs('remove', index);
          )
      )

      tabs.wijtabs('add',tabName,moment(execution.date()).format('DD MMM YYYY'))
      ko.applyBindings(execution,$(tabName)[0])
      @tabCounter++

More precisely the exception I get is at line 3008 of knockout 2.2.1 debug:

Uncaught TypeError: Cannot read property 'length' of null 
 // Loosely check result is an array of DOM nodes
        if ((typeof renderedNodesArray.length != "number") || (renderedNodesArray.length > 0 && typeof renderedNodesArray[0].nodeType != "number"))
Uncaught TypeError: Cannot read property 'length' of null
            throw new Error("Template engine must return an array of DOM nodes");

This is my template

<script type="text/html" id="singleExecutionTemplate">
    <div>
        <ul>
            <li>
                <h1>Step 1</h1>
                Setup input data
            </li>
            <li>
                <h1>Step 2</h1>
                This is the second step.
            </li>
            <li>
                <h1>Step 3</h1>
                Analyse result and record
            </li>
        </ul>
        <div>
            Setup
        </div>
        <div>
            Run
        </div>
        <div>
            Analyse
        </div>
    </div>
</script>

Why isn't it rendered correctly?

score 3 · Accepted Answer · answered May 29 '13 at 14:03

I ran into this where I was switching to using a Razor template in ASP.Net MVC. The difference in the markup was subtle and I would have never caught my mistake without the answer given by Edmondo1984.

Yes, this must be a string property. With Razor, I had to change mine to look like:

<div data-bind="template: { name: '@Model.TemplateName' }"></div>

Hopefully, this helps.

score 1 · Answer 2 · answered Mar 27 '13 at 14:38

The problem comes with the following line:

 $(ui.panel).append('<div data-bind="template: { name: singleExecutionTemplate }"/>')

The template name should be a string property:

$(ui.panel).append('<div data-bind="template: { name: 'singleExecutionTemplate' }"/>')

works correctly

Knockout Templates with Wijmo

2 Answers2