Нокаут Mapping плагин для отображения данных в таблице

Question

У меня есть данные, поступающие из JSON как:

[ 
    {"ProjectName":"Region1.Site1","Turbine":"T1","Fault":0,"Description":"No Fault"}, 
    {"ProjectName":"Region1.Site1","Turbine":"T2","Fault":0,"Description":"No Fault"}, 
    {"ProjectName":"Region1.Site1","Turbine":"T3","Fault":1,"Description":"In Alarm"}, 
    {"ProjectName":"Region1.Site1","Turbine":"T4","Fault":1,"Description":"In Alarm"}, 
    {"ProjectName":"Region1.Site2","Turbine":"T1","Fault":0,"Description":"No Fault"}, 
    {"ProjectName":"Region1.Site2","Turbine":"T2","Fault":0,"Description":"No Fault"}, 
    {"ProjectName":"Region1.Site2","Turbine":"T3","Fault":1,"Description":"In Alarm"}, 
    {"ProjectName":"Region1.Site2","Turbine":"T4","Fault":1,"Description":"In Alarm"} 
] 

Я хотел бы показать эти данные в виде таблицы с заголовками таблицы, как Project Name, Turbine, Fault, Description.

Я использую Knockout.js и mapping plugin. Вот JSFiddle to show what I tried so far.

У меня в основном две цели

1. Поместите эти данные в таблицу
2. Обновление строки при изменении состояния ошибки. Каждая строка уникально идентифицируется комбинацией ProjectName и Turbine.

---

Благодаря Сандип.

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

var viewModel = {};

viewModel.Stats = ko.mapping.fromJS(data);

Можете ли вы сказать мне, что я делаю неправильно. Также, когда я получаю обновления в данных, работает ли следующая инструкция?

ko.mapping.fromJS(data,viewModel);

Поскольку отображение плагин не работал, я должен был использовать ko.utils.Arraymap функцию.

Благодаря

Answer 1

Вот рабочая копия. Link

Код был разбит - никаких соответствующих фигурных скобок и ссылки на 'Данные' вместо статистики.

Answer 2

Похоже, у вас есть какие-то дополнительные скобки и скобки (после определения JSon данных и после applyBindings). Помимо этого вам просто нужно изменить «foreach: Data» на «foreach: Stats», чтобы ваш tbody указывал данные viewModel.

Answer 3

Вот пример того, что я делаю что практически то же самое:

var UserRecord = function (data) { 
    ko.mapping.fromJS(data, {}, this); 
}; 

var mapping = { 
    key: function (data) { 
     return ko.utils.unwrapObservable(data.Id); 
    }, 
    create: function (options) { 
     return new UserRecord(options.data); 
    } 
}; 


function UserListViewModel() { 
    this.users = ko.mapping.fromJS(data, mapping) 
} 

Причина оно не было работать это так у вас есть массив, вы должны сказать, отображение KO, что каждое свойство в каждом массиве элемент должен быть заметным.