将KnockoutJS的数据绑定拆分到表C#中 [英] Split the data binding of KnockoutJS into table C#

问题描述

在KnockOutJS中，我有一个带有data-bind ="value:contents"的标签作为输入标签

I have a tag with data-bind = "value: contents" for an input tag in KnockOutJS

<input type="text" class="form-control" data-bind="value: contents" />

它以以下格式显示:{"key1":"value1"，"key2":"value2"}

It displays in following format {"key1":"value1","key2":"value2"}

我要用名称和值构建一个表，然后分别拆分这些键和值并在TD中显示

I'm building a table with name and value then split those keys and values separately and display in TDs

<td>
    <strong>
         <span id="textKey" data-bind="text: displayKey" />    
    </strong>
</td>

<td>
         <input id="textValue" type="text" data-bind="value: displayValue" />
</td>

您能为我提供一些关于如何将这些键和值拆分为Dictionary<>以及列和行的列的想法吗?

Could you help me some ideas of how I can split those keys and values into Dictionary<> and into columns and rows in my case?

谢谢

推荐答案

如果您无法控制contents的结构，则可以使用转换为在上一个线程中创建的数组，如下所示:

If you do not have control over the structure of contents, you can use the conversion to array created in your previous thread like this:

HTML

<table>
    <tbody data-bind="foreach: mapDictionaryToArray(contents())">
        <tr>
            <td> <span id="textKey" data-bind="text: $data.key"></span>

            </td>
            <td>
                <input id="textValue" type="text" data-bind="value: $data.value" />
            </td>
        </tr>
    </tbody>
</table>

ViewModel

ViewModel

var viewModel = {
        contents: ko.observable({
            "reference": "2Z94",
                "car_id": "9861"
        }),
        mapDictionaryToArray: function (dictionary) {
            var result = [];
            for (var key in dictionary) {
                if (dictionary.hasOwnProperty(key)) {
                    result.push({
                        key: key,
                        value: dictionary[key]
                    });
                }
            }
            return result;
        }
    };

jsFiddle

jsFiddle

这篇关于将KnockoutJS的数据绑定拆分到表C#中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！