javascript - knockout 矩阵

Question

我正在尝试使用 knockout 制作矩阵匹配表，但我对当前数据绑定(bind)和父数据绑定(bind)之间的比较感到困惑。

这是jsfiddle.net/wup9rxeu/4/

<script type="text/html" id="cubeheader-template">
<th data-bind="text: $data.Name"></th>
</script>

<script type="text/html" id="body-template">
<!-- ko foreach: $parent.modeldim -->
<td>x</td>
<!-- /ko -->
</script>

我想要完成的是，当基于 modelcubdim 数据为每个 td 填充 x 和 - 时。

我需要一些指针来将 ID 与父 ID 进行比较，如果匹配，则为 X，否则 -

谢谢

Answer 1

您可以使用转换后的数据扩展模型以表示表中的每个单元格。

// just for easy searching items by its ID
data.itemById = function(arr, id){
    return ko.utils.arrayFirst(arr, function(item){
        return item.ID == id;
    });
};

// the property that will hold actual data for *every* table row
// in the format { Name: [Cub Name], Data [array of "x" and "-"] }
data.series = ko.utils.arrayMap(data.modelcub, function(cub){
    var cubdim = data.itemById(data.modelcubdim, cub.ID);
    return {
        Name: cub.Name,
        Data: ko.utils.arrayMap(data.modeldim, function(dim){
            var item = cubdim && data.itemById(cubdim.CubeDimension, dim.ID);
            return item ? "x" : "-";
        })
    };
});

然后稍微更改您的标记:

<tbody data-bind="foreach: series">            
<tr> 
    <th data-bind="text: Name"></th>  
    <!-- ko foreach: Data -->
    <td data-bind="text: $data"></td>
    <!-- /ko -->
</tr>
</tbody>

你会得到它像这样工作:http://jsfiddle.net/wup9rxeu/5/