淘汰排序数组不能正确显示嵌套元素

我是Knockout.js的新手，最近我开始使用JQuery和knockout-sortable项目。对于我的项目，我使用一个复杂的数据结构来显示一些表单。在某一点上，我试图创建一个嵌套的包含问题的可排序页面数组。我能够得到一个容器，其中包含所有的页面和他们的信息，但我有麻烦，使容器显示正确的问题。

如果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小提琴工作，但我必须从数据库中获得复杂的信息，所以它需要时间。如果有任何帮助，也欢迎:)。

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

编辑:我基于这个模板。

我正在使用这个项目。

我设想的最终结果与此有点相似。