Knockout sortable array not displaying nested elements correctly

Question

I'm new to Knockout.js, and recently I've started working with JQuery and the knockout-sortable project. For my project, I'm using a complex data structure to display some forms. At one point, I'm trying to make a nested sortable array of pages that contain questions. I am able to get a container that holds all of the pages and their information, but I am having trouble getting the container to show the questions correctly.

I the following is in the 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>

In the pages template, I use three different ways of trying to display the questions. The first method displays one sortable Foo, the second one displays the correct number of Foos, and the third one displays a blank sortable area with no items. I am working on a JS Fiddle, but I have to get the complex information from the database, so it's taking time. Any help there would also be welcome :).

My question, then, is why am I getting three different things, and where am I going wrong?

EDIT: I based my templates off of this.

I'm using this project.

I envision the end result being somewhat similar to this.

Answer 1

It might help to get a sample in jsFiddle, but it looks like:

For this one: <ul data-bind="sortable: {foreach:Questions}">

You want either just sortable: Questions which is equivalent to sortable { data: questions }

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

You want: sortable: { template: 'questions', data: Questions }

So, mainly just using data instead of foreach