Knockout.js嵌套列表
我试图格式化一个包含两个子对象的对象的敲打模型。当我尝试为子对象包含一个标题时,第二个标题会出现在我期望的组之外。请让我知道,如果有问题的编码或我的期望 期望: 标题 建议1 建议2 列表1标题 清单1项目1 清单1第2项 列表2标题 清单2第1项 清单2项目2 我得到的是: 标题 建议1 建议2 列表1标题 清单1项目1 清单1第2项 清单2第1项 清单2项目2 列表2标题 代码是:Knockout.js嵌套列表,knockout.js,Knockout.js,我试图格式化一个包含两个子对象的对象的敲打模型。当我尝试为子对象包含一个标题时,第二个标题会出现在我期望的组之外。请让我知道,如果有问题的编码或我的期望 期望: 标题 建议1 建议2 列表1标题 清单1项目1 清单1第2项 列表2标题 清单2第1项 清单2项目2 我得到的是: 标题 建议1 建议2 列表1标题 清单1项目1 清单1第2项 清单2第1项 清单2项目2 列表2标题 代码是: <div id="tourneys_in_progress"> <h2>Ope
<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>
公开赛
取消比赛
开始回合
结束回合
当前锦标赛游戏
定位球
当前锦标赛选手
感谢您的帮助。我通过以下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>
公开赛
取消比赛
开始回合
结束回合
当前锦标赛游戏
当前锦标赛选手
定位球
感谢您的输入。如果您将HTML精简到仅相关的位,并提供一些与此相关的Javascript,那么我们可以重现问题。我能够使格式与以下HTML布局配合使用: