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.NetMVCで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 に答える