0

2 つのサブオブジェクトを持つオブジェクトを含むノック モデルをフォーマットしようとしています。サブオブジェクトのヘッダーをインクルードしようとすると、2 番目のヘッダーが予想されるグループの外に出てしまいます。コーディングや私の期待に問題がある場合はお知らせください。

期待：

ヘッダー Prop1 Prop2 リスト 1 ヘッダー リスト 1 アイテム 1 リスト 1 アイテム 2 リスト 2 ヘッダー リスト 2 アイテム 1 リスト 2 アイテム 2

私が得るもの：

ヘッダー Prop1 Prop2 List1 ヘッダー List1 Item1 List1 Item2

リスト 2 項目 1 リスト 2 項目 2

List2 ヘッダー

コードは:

<div id="tourneys_in_progress">
    <h2>Open Tournaments</h2>
    <div id="tourneys">
        <ul data-bind="template: { name: 'tourneyTemplate', foreach: tourneys.CurrentTournaments }"></ul>
        <script id="tourneyTemplate" type="text/html">
        <li class="tourneys">
            <div class="tourney">
                <div data-bind="text: 'TournamentType: ' + TournamentTypeString"></div>
                <div data-bind="text: 'Number of Rounds: ' + Rounds" ></div>
                <div data-bind="text: 'Boards: ' + Boards" ></div>
                <div data-bind="text: 'Players per Board: ' + PlayersPerBoard"></div>
                <div data-bind="text: 'Time Control: ' + TimeControlString"></div>
                <div  data-bind="attr: { title: TournamentId }" class="join_tourney command">Cancel Tournament</div>
                <div  data-bind="attr: { title: TournamentId }" class="leave_tourney command">Start Round</div>
                <div  data-bind="attr: { title: TournamentId }" class="leave_tourney command">End Round</div>

                <div>
                <ul data-bind="template: { name: 'gamesTemplate', foreach: TournamentGames }"></ul>
                <ul data-bind="template: { name: 'playersTemplate', foreach: TournamentPlayers }"></ul>

                <h3>Current Tournament Games</h3>
                <script id="gamesTemplate" type="text/html">
                    <li class="players">
                        <div class="left_align" data-bind="text: 'Tournament Players: ' + TournamentPlayersList + '  '"/>
                        <div class="right_align" data-bind="text: GameStatusText" />
                        <div class="command">Set Game</div>
                    </li>
                </script>
                <h3>Current Tournament Players</h3>
                <script id="playersTemplate" type="text/html"> 
                    <li class="players">
                        <span class="left_align" data-bind="text: PlayerName + '  '"/>
                        <img data-bind="attr: { src: 'https://graph.facebook.com/' + FbId + '/picture?width=25&height=25' }" />
                        <span class="right_align" data-bind="text: PlayerRanking" />
                    </li>
                </script>
                </div>
        </li>
        </script>
    </div>
</div>

ご協力いただきありがとうございます。

4

1 に答える 1

1

次の html マークアップを使用して、必要な書式設定を取得できました。

<div id="tourneys_in_progress">
    <h2>Open Tournaments</h2>
    <div id="tourneys">
        <ul data-bind="template: { name: 'tourneyTemplate', foreach: tourneys.CurrentTournaments }"></ul>
        <script id="tourneyTemplate" type="text/html">
        <li class="tourneys">
            <div class="tourney">
                <div data-bind="text: 'TournamentType: ' + TournamentTypeString"></div>
                <div data-bind="text: 'Number of Rounds: ' + Rounds" ></div>
                <div data-bind="text: 'Boards: ' + Boards" ></div>
                <div data-bind="text: 'Players per Board: ' + PlayersPerBoard"></div>
                <div data-bind="text: 'Time Control: ' + TimeControlString"></div>
                <div  data-bind="attr: { title: TournamentId }" class="join_tourney command">Cancel Tournament</div>
                <div  data-bind="attr: { title: TournamentId }" class="leave_tourney command">Start Round</div>
                <div  data-bind="attr: { title: TournamentId }" class="leave_tourney command">End Round</div>
                <div>
                    <h3>Current Tournament Games</h3>
                    <ul data-bind="template: { name: 'gamesTemplate', foreach: TournamentGames }"></ul> 
                    <h3>Current Tournament Players</h3>
                    <ul data-bind="template: { name: 'playersTemplate', foreach: TournamentPlayers }"></ul>

                    <script id="gamesTemplate" type="text/html">
                        <li class="players">
                            <p class="left_align" data-bind="text: 'Tournament Players: ' + TournamentPlayersList + '  '"></p>
                            <p class="right_align" data-bind="text: GameStatusText"></p>
                            <div class="command">Set Game</div>
                        </li>
                    </script>

                    <script id="playersTemplate" type="text/html"> 
                        <li class="players">
                            <span class="left_align" data-bind="text: PlayerName + '  '"/>
                            <img data-bind="attr: { src: 'https://graph.facebook.com/' + FbId + '/picture?width=25&height=25' }" />
                            <span class="right_align" data-bind="text: PlayerRanking" />
                        </li>
                    </script>
                </div>
            </div>
        </li>
        </script>
    </div>
</div>

入力していただきありがとうございます。

于 2013-07-01T19:10:54.517 に答える