javascript - 通过 Knockout.js、960.gs 以 Columner 方式显示数据

Question

我是 Knockout.js 和 960.gs 的新手。

我正在获取如下所示的 JSON 数据:

[1, a1],[2,a2],...[12, a12][13,b13],[14,b14]……[24,b24]

我采用了 grid-12 结构的 div

当我用 knockout.js 绑定(bind)那个网格时，它显示如下:

a1     a2     a3    a4     a5    a6
a7     a8     a9    a10    a11   a12
b13    b14    b15   b16    b17   b18
b19    b20    b21   b22    b23   b24

我想要如下输出，其中第一列将填充 a 值，紧接着 b 值将开始填充其余网格:

a1  a5 a9  b13
a2  a6 a10 b14
a3  a7 a11 ...
a4  a8 a12 ...

这怎么可能呢？请帮助，提前致谢。

Answer 1

一个很有趣的问题。首先，knockout 并不直接支持这一点，因为这需要一定程度的关于 knockout 中不存在的数据的知识。

经过几次尝试，我发现您需要一个中间步骤，将您的数据模型从一维数组转换为二维数组。这允许 each 的外部 foreach 绑定(bind)和 each 的内部 foreach 绑定(bind)。对于最后一行，您必须确保填满整行，否则表格将无法正确显示。

执行此操作的代码是 -

var rowIndex = 0;
var displayStructure = [];
var maxNumberCells = data.length;
var rowBreakCount = 24 / numberColumns;
while (rowIndex < (maxNumberCells + 1) / numberColumns) {
    var row = [];
    for (var column = 0; column < numberColumns; column++) {
        var i = rowIndex + rowBreakCount * column;
        var pushValue = (i < maxNumberCells) ? data[i] : '&nbsp;';
        row.push(pushValue);
    }

    displayStructure.push(row);
    rowIndex++;
}

我在 http://jsfiddle.net/photo_tom/cGMa2/20/ 有一个可行的解决方案