Отображение словаря Knockout Js MVC

Я застрял на чем-то довольно простом, я считаю, поэтому мне нужен некоторый опыт, чтобы помочь мне выполнить эту задачу.

У меня есть словарь, который принимает целое число и строку в качестве значений для хранения списка результатов (которые я покажу ниже). Моя модель представления и контроллер имеют этот код, который отправляет данные в виде строки 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, чтобы отобразить его в формате таблицы, например

Стол

1 Кейт

3 Алекс

4 Джейн

заранее спасибо

Джесмонд


asp.net-mvc-4 model-view-controller knockout.js knockout-mvc knockout-2.0
person jesmond    schedule 09.12.2012    source источник
comment
На мой взгляд, лучше реализовать mapDictionaryToArray на стороне сервера. Скомпилированный код работает намного быстрее, верно?   -  person RredCat    schedule 25.01.2013

Ответы (1)


arrow_upward
2
arrow_downward

Если вы хотите отобразить значения в таблице в виде текста, вам нужно использовать привязку текста вместо 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));
};
person nemesv    schedule 09.12.2012
comment
Большое спасибо, все понятно! - person jesmond; 09.12.2012