[英]How can I build a multi-column layout with a Knockout foreach?
我提供了一個代碼片段,該片段演示了我要解決的問題。 我正在嘗試基於observableArray
的數據構建兩列布局。 我試過使用Knockout if
綁定,但是在foreach
效果不佳。 這似乎應該很簡單,但是由於某些原因,我一直無法弄清楚如何在Knockout領域內完成這項工作。
function ViewModel() { var self = this; self.People = ko.observableArray([1, 2, 3, 4, 5]); } var viewModel = new ViewModel(); ko.applyBindings(viewModel);
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <h4>Current</h4> <div class="row"> <div class="col-xs-12" data-bind="foreach: People"> <p data-bind="text: $data"></p> </div> </div> <h4>Desired</h4> <div class="row"> <div class="col-xs-12"> <div class="row"> <div class="col-xs-6">1</div> <div class="col-xs-6">2</div> </div> <div class="row"> <div class="col-xs-6">3</div> <div class="col-xs-6">4</div> </div> <div class="row"> <div class="col-xs-6">5</div> </div> </div> </div>
試試看:
<div class="row">
<div class="col-xs-12" data-bind="foreach: People">
<!-- ko if: $index() % 2 == 0 -->
<div class="row">
<div class="col-xs-6" data-bind="text: $parent.People()[$index()]"></div>
<div class="col-xs-6" data-bind="text: $parent.People()[$index()+1]"></div>
</div>
<!-- /ko -->
</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.