2

解決しようとしている問題を示すコード スニペットを含めました。内のデータに基づいて 2 列のレイアウトを構築しようとしていますobservableArray。Knockoutifバインディングを使用してみましたが、foreach. これは非常に単純なはずですが、何らかの理由で、ノックアウトの領域内でこれを機能させる方法を理解できませんでした.

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>

4

1 に答える 1

3

それを試してください：

<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>

Jsフィドル

于 2015-01-27T17:57:36.807 に答える