敲除可排序數組無法正確顯示嵌套元素

Question

我是Knockout.js的新手，最近我開始使用JQuery和淘汰賽排序項目。對於我的項目，我使用複雜的數據結構來顯示一些表單。有一點，我試圖做一個嵌套的可排序頁面數組，包含問題。我能夠獲得容納所有頁面及其信息的容器，但我無法使容器正確顯示問題。

我下面是在HTML：

   <h2><span data-bind="text: DiscoveryFormUpdateLabel"></span></h2> 
       <div class="pagesList" data-bind="foreach:discoveryForm"> 
        <div class="row"> 
         <div class="text-area"> 
          <label>Discovery Form Name: </label> 
          <input data-bind="value:Name" width="400" /> 
         </div> 
        </div> 
        <br /> 
        <br /> 
        <br /> 
        <div class="row"> 
         <div class="text-area"> 
          <label>Welcome (HTML):</label> 
          <textarea data-bind="value: Welcome" rows="12" cols="89"></textarea> 
         </div> 
        </div> 
       </div> 

       <ul data-bind="sortable: {template: 'pages', data:discoveryFormPages}"></ul> 

       <script type="text/html" id="pages"> 
        <li> 
         <div class="row"> 
          <label>Name: </label> 
          <input data-bind="value:Name" /> 
         </div> 

         <div class="row"> 
          <label>Questions:</label> 
         </div> 

         <ul data-bind="sortable: {foreach:Questions}"> 
          <li>Foo</li> 
         </ul> 

         <ul data-bind="foreach:Questions"> 
          <li>Foo</li> 
         </ul> 

         <ul data-bind="sortable: { template: 'questions', foreach:Questions}" width="80%"></ul> 
        </li> 
       </script> 

       <script type="text/html" id="questions"> 
        <li> 
         <div class="row"> 
          <label>Subject:</label> 
          <textarea data-bind="value:Subject" cols="45"></textarea> 
         </div> 
         <div class="row"> 
          <label>Type:</label> 
          <select data-bind="options: $root.questionTypes, optionsText:'Description', value:Type"></select> 
         </div> 
         <div class="row"> 
          <label>Tagline:</label> 
          <textarea data-bind="value: Tagline" cols="45"></textarea> 
         </div> 
         <div class="row"> 
          <label>Visible:</label> 
          <input type="checkbox" data-bind="checked:Visible" /> 
         </div> 
        </li> 
       </script> 

在pages模板，我用三種不同的嘗試，以顯示問題的方式。第一種方法顯示一種可排序的Foo，第二種顯示正確的Foo秒數，第三種顯示空白的可排序區域，沒有項目。我正在JS小提琴上工作，但我必須從數據庫中獲取複雜信息，因此需要時間。任何幫助也將受到歡迎:)。

我的問題是，爲什麼我會得到三樣不同的東西，我會在哪裏出錯？

編輯：我基於我的模板關閉this。

我正在使用this項目。

我想最終的結果有點類似於this。

Answer 1

它可能有助於獲得的jsfiddle樣本，但它看起來像：

對於這一個：<ul data-bind="sortable: {foreach:Questions}">

你想要麼只是sortable: Questions這相當於sortable { data: questions }

對於這一個： <ul data-bind="sortable: { template: 'questions', foreach:Questions}" width="80%"></ul>

你想：sortable: { template: 'questions', data: Questions }

所以，主要是用data代替foreach