Question

我正在尝试使用Knockout动态添加标签到Wijmo标签，但是在我应用绑定后出现异常

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++

更确切地说，我得到的例外是淘汰赛2.2.1调试的第3008行：

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");

这是我的模板

<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>

为什么它没有正确呈现？

Answer 1

我遇到了这个问题，我转而使用ASP.Net MVC中的Razor模板。标记的差异是微妙的，如果没有Edmondo1984给出的答案，我就不会抓住我的错误。

是的，这必须是一个字符串属性。使用Razor，我不得不改变我的样子：

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

希望这有帮助。

Answer 2

问题出在以下几行：

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

模板名称应为字符串属性：

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

正常工作

使用Wijmo的Knockout模板

2 个答案: