Knockout Js Dictionary Hiển thị MVC

Question

Tôi đang mắc kẹt trên một cái gì đó khá cơ bản tôi tin, do đó tôi yêu cầu một số chuyên môn để giúp tôi đạt được nhiệm vụ này.

Tôi có một từ điển nhận số nguyên và chuỗi làm giá trị để lưu trữ danh sách kết quả (mà tôi sẽ hiển thị bên dưới). My Xem mẫu và điều khiển có mã này, mà gửi các dữ liệu như một JSON String để các Knockout:

[Mã cho ViewModel]

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

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

[Mã cho file 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> 

Trong tệp cshtml của tôi, tôi đang phân tích đối tượng được trả về từ Bộ điều khiển MVC và chuyển đổi nó thành một mảng. Bây giờ vấn đề là nó không hiển thị bất kỳ dữ liệu nào, nhưng dataFromServer biến chứa dữ liệu thích hợp. Nó có dữ liệu này:

Object {1: "Kate", 3: "Alex", 4: "Jane"}

Bây giờ, làm thế nào mà tôi có để lặp quả json này để hiển thị nó trong một định dạng bảng, chẳng hạn như

bảng

1 Kate

3 Alex

4 Jane

Cảm ơn trước

Jesmond

Answer 1

Nếu bạn muốn hiển thị các giá trị trong bảng dưới dạng văn bản bạn cần phải sử dụng text binding thay vì value

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

Và có một vấn đề khác với của bạn mã. Khi bạn gọi new ResultModel(dataFromServer), dataFromServer đã chứa dữ liệu ở định dạng đúng. Vì vậy, bạn không cần m.DictJson trong ResultModel chức năng:

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