基因敲除矩阵

Question

我正在尝试使用敲除法制作矩阵匹配 table，但我对当前数据绑定和父数据绑定之间的比较感到困惑。

<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>

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

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

谢谢

Answer 1

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

// 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/

基因敲除矩阵

Knockout matrix

javascript

data-binding

nested

knockout.js