Knockout Js字典显示MVC

Question

我坚持认为我非常基本的东西,因此我需要一些专业知识来帮助我完成这项任务.

我有一个字典,它采用整数和字符串作为值来存储结果列表(我将在下面显示).我的视图模型和控制器有这个代码,它将数据作为JSON字符串发布到Knockout:

[ViewModel代码]

public class ResultModel
{
    public Dictionary<int, string> dictResult { get; set; }
    public string dictResultJson { get; set; }

    public ResultModel()
    {
        dictResult = new Dictionary<int, string>();
    }
}

[cshtml文件的代码]

<h2>Results</h2>
<table>
    <tbody data-bind="template: { name: 'tblResult', foreach: dictResultJson() }"></tbody>
</table>

<script id="tblResult" type="text/html">
    <tr>
        <td data-bind="value: key"></td>
        <td data-bind="value: value"></td>
    </tr>
</script>

<script type="text/javascript">
    var ResultModel = function(m) {
        var self = this;
        self.dictResultJson = ko.observableArray(mapDictionaryToArray(m.DictJson));
    };

    function mapDictionaryToArray(dictionary) {
        var result = [];
        for (var key in dictionary) {
            if (dictionary.hasOwnProperty(key)) {
                result.push({ key: key, value: dictionary[key] }); 
            }  
        }

        return result;
    }

    var data = @(Html.Raw(Json.Encode(Model)));
    var dataFromServer = ko.utils.parseJson(data.dictResultJson);
    console.log(dataFromServer);  

    ko.applyBindings(new ResultModel(dataFromServer));
    console.log("apply binding");
</script>

在我的cshtml文件中,我正在从MVC控制器解析返回的对象并将其转换为数组.现在的问题是它没有显示任何数据,但变量dataFromServer包含适当的数据.它有这样的数据:

对象{1:"凯特",3:"亚历克斯",4:"简"}

现在,我应该如何循环这个json Result以便以表格格式显示它,例如

表

1凯特

3亚历克斯

4简

提前致谢

杰斯蒙德

Answer 1

如果您想将表中的值显示为文本，则需要使用文本绑定而不是value

<tr>
    <td data-bind="text: key"></td>
    <td data-bind="text: value"></td>
</tr>

您的代码还存在另一个问题。当您调用时，new ResultModel(dataFromServer)它dataFromServer已经包含正确格式的数据。所以你不需要m.DictJson在ResultModel函数中：

var ResultModel = function(m) {
        var self = this;
        self.dictResultJson = ko.observableArray(mapDictionaryToArray(m));
};