使用 knockout foreach 和 html，当达到每行 3 个项目时如何将内容溢出到新行

Question

使用以下代码，我如何设置它以便在外部 table 中每行只能出现 3 tables。谢谢，麻烦您了！！！！！

说明：我的内心 table 代表一个蛋糕，我想找到一种方法在开始新的一行之前在屏幕上每行只显示 3 个蛋糕。

    E.g.   cake |  cake |   Cake 
              Cake |  cake |  cake 
              Cake |  cake  |  cake. 

    <div>
    <table>
    <tbody>
        <tr data-bind="foreach: cakes">
            <td>
                <table style="border: solid red 1px;">
                    <tr><td align="center"><p class="cake-name" data-bind="text: name"></p></td></tr>
                    <tr><td><img data-bind="attr: { src:  image}" width="300" height="200" /></td></tr>
                    <tr><td width="300"><p class="cake-description" data-bind="text: description"></p></td></tr>
                    <tr><td><p data-bind="text: price"></p></td></tr>
                    <tr><td><button type="button" class="del btn btn-xs btn-danger" data-bind="click: $root.showDeleteModal.bind($root)">Delete</button></td></tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>
</div>

Answer 1

如果我没理解错的话，只需将数据绑定更改为

，您就可以看到蛋糕中的前三项

foreach: cakes().slice(0, 3)

编辑：我想我不明白这个问题。我已经更新了我的答案，以展示如何在淘汰赛 foreach 循环中使用 $index() 来找到你的位置并每隔一段时间插入一个换行符。在这种情况下，每第 3 个项目。

function ViewModel() {
  var self = this;

  self.Cakes = ko.observableArray(['Vanilla', 'Chocolate', 'Strawberry', 'Almond', 'Ice Cream', 'Birthday', 'German Chocolate'])

}

ko.applyBindings(new ViewModel())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach: Cakes">
  <span data-bind="text: $data"></span>
  <span data-bind="if: $index() % 3 == 2">
  <br>
  </span>

</div>

使用 knockout foreach 和 html，当达到每行 3 个项目时如何将内容溢出到新行

Using knockout foreach and html, how do I overflow content to new row when 3 items per line has been reached

html

foreach

html-table

overflow

knockout.js