将KnockoutJS的数据绑定拆分成表C#答案

【问题标题】：Split the data binding of KnockoutJS into table C#将KnockoutJS的数据绑定拆分成表C#
【发布时间】：2014-06-02 07:50:00
【问题描述】：

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

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

显示格式如下 {"key1":"value1","key2":"value2"}

我正在构建一个包含名称和值的表，然后将这些键和值分别拆分并显示在 TD 中

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

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

您能否帮助我了解如何将这些键和值拆分为 Dictionary 并在我的情况下拆分为列和行？

谢谢

【问题讨论】：

转成字典可以看这个帖子stackoverflow.com/questions/23873562/…
嗨@GôTô 事实上，在你之前的帖子中又是我，非常感谢你的帮助，但现在我面临一件事，键和值的数据不是来自预定义的值JS，它来自输入标签的data-bind，我无权修改data-bind中的“内容”，所以现在我想知道我是否可以将mapDictionaryToArray（内容）放在cshtml输入标签中?

标签： c# parsing dictionary knockout.js binding

【解决方案1】：

如果您无法控制contents 的结构，您可以使用在之前的线程中创建的数组转换，如下所示：

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>

视图模型

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

【讨论】：

感谢 GoTo，我已将 js 拆分为多个文件：就像在此示例中一样，但是我仍然无法从转换后的字典中获取数据，您可以在这里查看这些文件吗：@987654322 @谢谢

【解决方案2】：

如果您想使用 Knockout 填充 HTML 表格，您可以使用 observableArray 和 foreach 数据绑定。请参阅此处了解使用以下代码的工作 JSFiddle：

查看模型：

var vm = {
    contents: ko.observableArray([{
        "displayKey": "Fruit",
        "displayValue": "Bananas"
    }, {
        "displayKey": "Colour",
        "displayValue": "Red"
    }, {
        "displayKey": "Car",
        "displayValue": "Ferrari"
    }])
};
ko.applyBindings(vm, document.body);

HTML：

<textarea style="width: 500px; height: 90px;"
data-bind="value: JSON.stringify(ko.toJS(contents()))"></textarea>

<table>
    <tbody data-bind="foreach: contents">
        <td> <strong>
                 <span id="textKey" data-bind="text: displayKey" />    
            </strong>
        </td>
        <td>
            <input id="textValue" type="text" data-bind="value: displayValue" />
        </td>
    </tbody>
</table>

【讨论】：

谢谢，它工作得很好，不幸的是，在我的情况下，密钥有时没有固定，因为我再次检查过，它们与有时我有这样的数据不同：“{\”参考\":\"8542\",\"rion_id\":\"9861\"}" 所以在表格中，我认为我无法修复 displayKey