Question

我想使用Knockout将对象映射到表。首先，我将向您展示我的目标：

function tableViewModel() {
    var self = this;     
    self.data = ko.observableArray();  

self.data.push(
    {
        "Warnings": {
            "numbers": 30,
            "content": [
              {
                "number" : 3001,
                "description" : "There may be a problem with the device you are using if you use the default profile"
              },
                {
                "number" : 3002,
                "description" : "There may be a problem with the device you are using if you don't use the default profile"
              }
            ]
        },
        "Errors": {
            "numbers": 20,
            "content": [
              {
                "number": 1000,
                "description": "No network is loaded"
              },
                {
                "number": 1000,
                "description": "No network is loaded"
              }
            ]
        }
    }
);

    self.dataTitle = ko.observable("Warnings")             
}

ko.applyBindings(tableViewModel());

此对象包含两个“对象”，警告和错误。我希望能够在淘汰赛中依赖变量（在这种情况下在变量dataTitle上），仅显示警告的内容（如果是dataTitle ==“警告”）或错误的内容。

基本上，我希望它能够找到与dataTitle内容相对应的对象。

我正在努力实现这样的目标，但显然它不起作用：

<table class="table table-hover" data-bind="foreach: data">
    <thead>
       <tr>
           <th style="width:100px">Numero</th>
           <th>Description</th>
       </tr>
    </thead>
    <tbody data-bind="foreach: data[dataTitle].content"> <!-- This line is not giving expected results -->
        <tr>
            <td data-bind="text: $data.number"></td>
            <td data-bind="text: $data.description"></td>
        </tr>
    </tbody>
</table>

这是一个代表问题的JSFiddle：http://jsfiddle.net/etiennenoel/bqcMR/

我的问题是：有没有办法使用KnockoutJS来做到这一点，或者那要求很多？

Answer 1

好的，你可以将表格放到模板中，如果你只想把它放在你的页面中一次，但这样可行：

<tbody data-bind="visible: $root.dataTitle() === 'Warnings', foreach: $data.Warnings.content">
    <tr>
        <td data-bind="text: number"></td>
        <td data-bind="text: description"></td>
    </tr>
</tbody>
<tbody data-bind="visible: $root.dataTitle() === 'Errors', foreach: $data.Errors.content">
    <tr>
        <td data-bind="text: number"></td>
        <td data-bind="text: description"></td>
    </tr>
</tbody>

你基本上每个部分都有一个表，只显示你想要的表。

我对视图模型进行了一些其他更改，同时试图让它工作，但我不确定它们是否需要它们。请参阅fiddle。

KnockoutJS - 根据变量将对象绑定到表

1 个答案: