Как связать данные JSON с Html в нокауте

Question

Я получаю ниже данных от моего объекта JSon,

var dataFromServer='[ 
    { 
     "Id":1, 
     "Name":"Province A", 
     "AreaDTO":[], 
     "SubStationDTO":[] 
    }, 
    { 
     "Id":2, 
     "Name":"Province B", 
      "AreaDTO":[ 
       { 
        "Id":1, 
        "Name":"ProvinceB Area A", 
        "ProvinceId":2, 
        "SubStationDTO":null 
       }, 
       { 
        "Id":2, 
        "Name":"Province B Area B", 
        "ProvinceId":2, 
        "SubStationDTO":null 
       }], 
      "SubStationDTO":[ 
       { 
        "Id":1, 
        "Name":" Province B Area A SubStation A", 
        "AreaId":1, 
        "MetersDTO":null 
       }  
      ] 
    } 
]'; 

Пожалуйста, см: http://jsfiddle.net/Jayaruvan/s8403t71/1/

<table class="table table-bordered table-condensed"> 
    <thead> 
    <tr> 
     <th>Province Name</th> 
     <th class="numeric">Area Count</th> 
     <th class="numeric">SubStation Count</th> 
     <th colspan="2"></th> 
    </tr> 
    </thead> 
    <tbody data-bind="foreach: ProvincesArray"> 
    <tr> 
     <td><p data-bind="text: Name"></p></td> 
     <td ><p data-bind="text: Areas().length" ></p></td> 
     <td> <p data-bind="text: SubStations().length" ></p></td> 
     <td class=""><a class="btn-link" data-bind="click: $parent.EditProvince">Edit</a></td> 
     <td class=""><a class="btn-link" data-bind="click: $parent.RemoveProvince">Delete</a></td> 

    </tr> 
    </tbody> 
</table> 

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

Я имею в виду это: http://jsfiddle.net/rVPBz/2/ как пример, (Спасибо асе для правильного форматирования)

Answer 1

У меня есть сделать новый Jsfiddle для вашего. Я исправил некоторые основные ошибки.

Таблица выполнена.

Ваша модель реализации модели была плохая, я ее реорганизовал.

var ProvinceViewModel = function() { 
    var self = this; 

    this.Province = function(data){ 
     data = data || {}; 

     this.Id = data.Id; 
     this.Name=data.Name; 
     this.Areas = ko.observableArray([]); 
     this.SubStations = ko.observableArray([]); 
    }; 

    this.ProvincesArray = ko.observableArray([new  this.Province()]); 

    this.Area = function(data){ 
    data = data || {}; 

     this.Id = ko.observable(data.Id); 
     this.Name = ko.observable(data.Name); 
     this.SubStations = ko.observableArray([]); 
    }; 

    this.SubStation = function(data){ 
     data = data || {}; 

     this.Id = ko.observable(data.Id); 
     this.Name = ko.observable(data.Name); 
     this.Meters = ko.observableArray([]); 
    };  

    this.ProvincesArray = ko.utils.arrayMap(dataFromServer,   function(item) { 

     var Province = new self.Province(item); 
     var Area= new self.Area(item); 
     var SubStations= new self.SubStation(); 

     return Province; 
    }); 
}; 
ko.applyBindings(new ProvinceViewModel()); 

Вы можете увидеть новую структуру, которая работает, вы можете добавить любой PARAMET

http://jsfiddle.net/YvanBarbaria/s8403t71/15/