Jquery 使用嵌套淘汰模板显示嵌套数据

我正在尝试使用knockout制作一个具有可折叠行的表。每个“父”行都存在于我的数据结构的顶层，每个“子”行都是成员数组的元素

当我从服务器更新数据时，问题就出现了。数据会更新，但我可以看出它正在替换我的DOM对象，因为“parent”行中的复选框正在被清除。我有一把小提琴演示了这个问题，它使用计时器更新数据：

我已经读到，使用嵌套的foreach而不是

{{each}

应该可以解决这个问题，但我无法做到这一点——请参阅上面的注释部分

---

如果有任何现有的问题可以解决这个问题，我不知道如何解决。感谢您提供的任何帮助

您没有存储复选框的值，因此每次都会清除该复选框。下面的小提琴能解决你的问题吗

样品
地位
复选框=
{{每个示例_运行（）}
{{/每个}}
变量映射={
“样本”：{
关键：功能（项目）{
返回不可拆卸的物料（物料id）；
},
“示例_运行”：{
关键：功能（项目）{
返回不可拆卸的物料（物料id）；
}
}
}
};
变量数据={}；
data.samples=[{
id:“s1”，
样本名称：“AR008”，
是否选中：false，
运行示例：[
{
id:“rs1”，
名称：“run1”，
状态：“完成”}]}]；
var viewModel=ko.mapping.fromJS（数据，映射）；
应用绑定（视图模型）；
//每2秒更新一次数据
var i=0；
setInterval（函数（）{
变量数据={}；
data.samples=[{
id:“s1”，
样本名称：“AR008”+i，
运行示例：[
{
id:“rs1”，
名称：“运行”+i，
状态：“完成”+i}]}]；
//是这样吗？updateFromJS已被弃用
viewModel=ko.mapping.fromJS（数据，viewModel）；
i++；
}, 2000);

在查看小提琴时，每次定时器更新都会完全替换viewModel中的所有数据。这就是您想要做的吗？是的-这就是您从服务器轮询更新数据集时要做的。获取整个过程，让KO+mapping找出发生了什么变化。它通过在模型中存储检查状态来绕过我提到的特定症状，但它本身并没有回答最初的问题-如何让它在没有{{each}的情况下工作？如果删除“子”行并仅更新父行，则复选框状态将由KO保留，而不会将其移动到模型中。所以，它应该是可行的，而不需要改变我的模型来存储东西作为一种解决方法，对吗？好的-我已经修改了我的示例，它没有使用{{each}。看一看：首先，谢谢你花时间在这上面。就连柯的作者也放弃了。我编辑了你的版本，删除了复选框的数据绑定，直到我发现是什么做的-你把一个表放在一个3列跨度的TD中，并在上面使用了嵌套模板，这很有效。我不知道为什么KO foreach使用TABLE而不是TR，但我认为这是KO中的一个bug。既然你所做的一切奏效了，我就称之为答案。谢谢

<table>
    <thead>
        <th class="checkbox_th"/>
        <th class="name_th" align="left">Sample</th>
        <th class="status_th" align="left">Status</th>
    </thead>
    <tbody data-bind="template: {name: 'sampleRowTemplate', foreach: samples}"></tbody>
    <script type="text/x-jquery-tmpl" id="sampleRowTemplate">
        <tr>
            <td><input type="checkbox" name="select_sample" data-bind="checked: is_checked"/></td>
            <td><span data-bind='text: sample_name'/>   The checkbox =<span data-bind="text:is_checked"/></td>
            <td><span data-bind='text: ""'/><td/>
            </tr>
                {{each sample_runs()}}
                <tr>
                <td/>
                <td><span data-bind='text: $value.name'/></td>
                <td><span data-bind='text: $value.status'/></td>
            </tr>
                {{/each}}
                <!--
                <script type="text/x-jquery-tmpl" id="sampleRunTemplate">
                <td/>
                <td>${name}</td>
                <td>${status}</td>
            </script>
                <tr data-bind="template: {name: 'sampleRunTemplate', foreach: sample_runs  }"></tr>
                -->

            </script>
            </table>            


var mapping = {
    'samples': {
        key: function(item) {
            return ko.utils.unwrapObservable(item.id);
        },
        'sample_runs': {
            key: function(item) {
                return ko.utils.unwrapObservable(item.id);
            }
        }
    }
};

var data = {};
data.samples = [{
    id: "s1",
    sample_name: "AR008",
    is_checked: false,    
    sample_runs: [
        {
        id: "rs1",
        name: "run1",
        status: "done"}]}];
var viewModel = ko.mapping.fromJS(data, mapping);
ko.applyBindings(viewModel);

// update the data every 2 seconds
var i = 0;
setInterval(function() {
    var data = {};
    data.samples = [{
        id: "s1",
        sample_name: "AR008" + i,
        sample_runs: [
            {
            id: "rs1",
            name: "run" + i,
            status: "done" + i}]}];
    // is this right? updateFromJS is deprecated
    viewModel = ko.mapping.fromJS(data, viewModel);
    i++;
}, 2000);