KnockoutJs：渲染数组成员，每行三个

debugcn 发表于 Dev

数据库

我有一个带有颜色的可观察数组。我foreacheach数组，并从中渲染背景颜色的div。问题是我希望每行只有三种颜色。例如，如果我有10种颜色，则应该有四行。前三个具有三种颜色，最后一种-具有一种。

的HTML：

<div data-bind="foreach: colors">
    <div data-bind="style: { backgroundColor: $data, 
                              width: '20px', 
                              height: '20px'}">                              
    </div>
</div>

javascript：

var MyViewModel = function() {
  this.colors = ko.observableArray(['blue', 'yellow', 'green', 'purple','white', 'black', 'orange']);
}

ko.applyBindings(new MyViewModel());

JSFIDDLE：

http://jsfiddle.net/2Qnv7/142/

塞德里克

我认为您可以使用CSS类和溢出的CSS属性来做到这一点。对于所有网页设计功能，使用CSS更为有用。

.container div
{
    display:inline-block;
}

.container
{
    border : 1px solid;
    max-width: 70px;
    overflow: visible;
}

对于HTML：

<div class="container" data-bind="foreach: colors">
    <div data-bind="style: { backgroundColor: $data, 
                              width: '20px', 
                              height: '20px'}">                              
    </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。