2

私は 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、質問を表示するために 3 つの異なる方法を使用しています。最初の方法は 1 つの sortableFooを表示し、2 番目の方法は正しい数の をFoo表示し、3 番目の方法はアイテムのない空白のソート可能領域を表示します。私はJS Fiddleに取り組んでいますが、データベースから複雑な情報を取得する必要があるため、時間がかかります。どんな助けも大歓迎です:)。

では、私の質問は、なぜ 3 つの異なる結果が得られるのか、どこが間違っているのかということです。

編集: テンプレートはthisに基づいています。

私はこのプロジェクトを使用しています。

最終的な結果は、これと多少似ていると思います。

4

1 に答える 1

4

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

于 2013-03-06T15:07:37.860 に答える