0

我正在尝试使用 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>

为什么没有正确渲染？

4

2 回答 2

3

我在 ASP.Net MVC 中切换到使用 Razor 模板时遇到了这个问题。标记的差异是微妙的，如果没有 Edmondo1984 给出的答案，我永远不会发现我的错误。

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

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

希望这会有所帮助。

于 2013-05-29T14:03:36.667 回答
1

问题来自以下行：

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

模板名称应该是一个字符串属性：

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

正常工作

于 2013-03-27T14:38:16.983 回答