如何使用淘汰赛绑定表中的内部数组

Posted 2023-03-27

【中文标题】如何使用淘汰赛绑定表中的内部数组

【英文标题】：How to bind inner array in a table with knockout

【发布时间】：2013-06-28 20:12:34

【问题描述】：

更新：看来我忘记了最重要的信息。这不是在 html 文件中，而是在 xsl 文件中。 ko 评论标签被删除，这就是为什么“名称”不存在的原因。我会将 Damien 的回复标记为答案，以表彰他通过访问 JSFiddle 引导我朝着正确的方向前进。谢谢。

原问题：

有没有什么方法可以用 knockout.js 绑定表中 JSON 对象的内部数组？我尝试了很多不同的方法，但似乎没有一个有效。有两个类似的问题：

Knockout Array of Arrays

Binding Nested Array Using Knockout foreach

但是，在这两种情况下，它们都使用容器绑定。我需要使用无容器绑定，这似乎不起作用。

这是一个简化的代码示例：

var 报告数据 = [ “类别”：“第一类别”， “身份证”：1， “项目”： [ “姓名”：“名字”， “姓名”：“第二个姓名” ] , “类别”：“第二类”， “身份证”：2， “项目”： [ “姓名”：“名字”， “姓名”：“第二个姓名” ] ];

绑定代码是基本的（摘录）：

var viewModel = 函数（） 变种自我=这个； self.reportData = ko.observableArray(); var vm = new viewModel(); vm.reportData(数据); ko.applyBindings(vm);

我需要的是：

我尝试了许多不同的方法来获取内部数组数据，但我总是收到未定义“名称”的错误。我在控制台中确认我得到了正确的数据，并且外部对象数组值显示没有问题。

访问此内部数组并在具有内部数组无容器绑定的表中显示的正确方法是什么？

【参考方案1】：

请您看看this fiddle 并告诉我什么不起作用。 因为对我来说效果很好。

查看：

<table>
    <tbody data-bind="foreach: reportData">
        <tr>
            <td data-bind="text: Category"></td>
        </tr>
        <!-- ko foreach: Items -->
        <tr>
            <td data-bind="text: Name"></td>
        </tr>
        <!-- /ko -->
    </tbody>
</table>

JS：

data =  [
        "Category": "First Category",
            "Id": 1,
            "Items": [
            "Name": "First Name"
        , 
            "Name": "Second Name"
        ]
    , 
        "Category": "Second Category",
            "Id": 2,
            "Items": [
            "Name": "First Name"
        , 
            "Name": "Second Name"
        ]
    ]
;


var viewModel = function () 
    var self = this;
    self.reportData = ko.observableArray();


var vm = new viewModel();
vm.reportData(data);
ko.applyBindings(vm);

【讨论】：

内部数组行未显示在我的完整代码中，并且我总是收到未定义“名称”的错误。现在它在小提琴中完美运行......它一定意味着其他东西与之冲突。

你知道吗？我现在觉得很傻……我忘记了最重要的信息。这不是一个 html 文件，而是一个 xsl。 ko cmets 被剥离了！这就是为什么没有定义“名称”的原因！我不得不将它们包装在 xsl:comment 标记中。我仍然会赞扬您，因为您对 JSFiddle 的使用使我朝着正确的方向前进。谢谢！