用淘汰赛js创建不同的行

Question

我在我的项目中使用了敲除和引导，我有一组我的人，想在我的投资组合页面中显示他们，我想要一个引导行，有 3 列，我使用敲除绑定，这是我的html代码：

 <div class="row" data-bind="foreach:personarray">
    <div class="col-sm-4 col-lg-4">
        <div class="rowg">
            <a href="#"><img data-bind="attr:{src:Image}" height="250" width="250" class="img-circle img-responsive center-block" /> </a>
            <h3 class="headertext" data-bind="text:Name"></h3>
            <p class="parageraf" data-bind="text:Desc"></p>
            <ul class="list-inline social-buttons ulg">
                <li>
                    <a href="#">
                        <i class="fa fa-twitter"></i>
                    </a>
                </li>
                <li>
                    <a><i class="fa fa-facebook"></i> </a>
                <li>
                    <a><i class="fa fa-linkedin"></i> </a>
                </li>
            </ul>
        </div>
    </div>
</div>

然后我在我的 java 脚本文件中填写我的 personarray。 问题是，当我使用 F12 时，我看到只有一个引导行，有 6 列！！！但我想要 2 行，每行必须有 3 列 我尝试将每个绑定放在不同的标签中，但它们都不是我想要的

这是我的 JS 代码：

define(['services/logger'], function (logger) {
var title = 'Portfolio';
var PersonID = ko.observable();
var personarray = ko.observableArray([]);
var vm = {
    activate: activate,
    title: title,
    personarray: personarray
};

return vm;

//#region Internal Methods
function activate() {
    logger.log(title + ' View Activated', null, title, true);
    $.getJSON('api/Person/GetPersons', function (result) {

        personarray(result);
    });
return true;
}
//#endregion
 });

我的 rowg 类只包含填充和文本对齐。 谁能帮我 谢谢

Answer 1

您可以使用if 检查您是否在数组的第三个元素上，并在这种情况下创建一个新行。

要检查它是否是您可以使用的第三个元素（在 foreach 内）：

$index() % 3 == 0

这是一个可以用来解决问题的示例： https://jsfiddle.net/aq66405h/