Javascript 剔除可排序数组未正确显示嵌套元素

我不熟悉Knockout.js，最近我开始使用JQuery和Knockout可排序项目。对于我的项目，我使用复杂的数据结构来显示一些表单。有一次，我试图创建一个包含问题的嵌套可排序页面数组。我能够得到一个容器来保存所有页面及其信息，但是我很难让容器正确显示问题

I以下内容在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>

发现表单名称：






欢迎光临（HTML）：


姓名：
问题：

福


福




主题：
类型：
标语：
可见：

在

页面

模板中，我使用了三种不同的方式来显示问题。第一种方法显示一个可排序的

Foo

，第二种方法显示正确数量的

Foo

s，第三种方法显示一个没有项目的空白可排序区域。我正在使用JS小提琴，但是我必须从数据库中获取复杂的信息，所以这需要时间。欢迎您提供任何帮助：）

那么，我的问题是，为什么我得到了三种不同的东西，我哪里做错了

编辑：我的模板基于

我正在使用project

---

我设想最终结果与类似。

在JSFIDLE中获得一个示例可能会有所帮助，但它看起来像：

对于这个：

您只需要
sortable:Questions
，这相当于
sortable{data:Questions}

对于这个：

您需要：
sortable:{template:'questions'，data:questions}

因此，主要使用
数据
而不是
foreach
可能有助于在JSFIDLE中获取示例，但它看起来像：

对于这个：

您只需要
sortable:Questions
，这相当于
sortable{data:Questions}

对于这个：

您需要：
sortable:{template:'questions'，data:questions}

所以，主要是使用
数据
而不是
foreach
哇，我是个笨蛋。这完全解决了问题。谢谢哇，我是个笨蛋。这完全解决了问题。谢谢