jquery - Create a basic Grid using KnockoutJS Mapping plugin and MVC 3 -

i have searched high , low , tried various patterns seems cannot work right. 1 time got work there code figured there had easier way , broken. goal... understand basics of how use ko mapping , mvc have grid load.. , possibly use form update it. cannot find examples working situation. here down now.

here action:

public jsonresult list()     {         var result = new jsonresult();         result.data = _service.getweightstats();          return json(result, jsonrequestbehavior.allowget);     } 

here class:

public class weightstat {     public int id { get; set; }     [required]     public double weight { get; set; }     public double? neck { get; set; }     public double? chest { get; set; }     public double? bicept { get; set; }     public double? waist { get; set; }     public double? hip { get; set; }     public double? thigh { get; set; }     public double? calf { get; set; }     [required]     public datetime date { get; set; }     [required]     public string timeofday { get; set; }     [required]     public string dietbehavior { get; set; }  } 

here template line:

<tbody data-bind='template: {name: "statrowtemplate", foreach: data.data }'></tbody> 

here template:

<script id="statrowtemplate" type="text/html">     <tr data-bind="attr: { id: id }">             <td><span data-bind="text: date"></span></td>             <td><span data-bind="text: timeofday"></span></td>             <td><span data-bind="text: dietbehavior"></span></td>             <td><span data-bind="text: weight"></span></td>             <td><span data-bind="text: neck"></span></td>             <td><span data-bind="text: chest"></span></td>             <td><span data-bind="text: bicept"></span></td>             <td><span data-bind="text: waist"></span></td>             <td><span data-bind="text: hip"></span></td>             <td><span data-bind="text: thigh"></span></td>             <td><span data-bind="text: calf"></span></td>     </tr> </script> 

here ko js:

<script type="text/javascript">  var data = $.getjson('weighttracker/list');  var viewmodel = ko.mapping.fromjson(data);  ko.mapping.updatefromjson(viewmodel, data);  ko.applybindings(viewmodel); 

json getting action:

{"contentencoding":null,"contenttype":null,"data":[{"id":1,"weight":195.3,"neck":10.3,"chest":34.6,"bicept":13.2,"waist":34,"hip":34,"thigh":16.4,"calf":8.8,"date":"\/date(1302554017067)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":2,"weight":194.3,"neck":10.157142857142858,"chest":34.4,"bicept":13,"waist":33.5,"hip":33.5,"thigh":16.2,"calf":8.6000000000000014,"date":"\/date(1302640417070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":3,"weight":193.3,"neck":10.014285714285714,"chest":34.2,"bicept":12.799999999999999,"waist":33,"hip":33,"thigh":15.999999999999998,"calf":8.4,"date":"\/date(1302726817070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":4,"weight":192.3,"neck":9.8714285714285719,"chest":34,"bicept":12.6,"waist":32.5,"hip":32.5,"thigh":15.799999999999999,"calf":8.2000000000000011,"date":"\/date(1302813217070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":5,"weight":191.3,"neck":9.72857142857143,"chest":33.800000000000004,"bicept":12.399999999999999,"waist":32,"hip":32,"thigh":15.599999999999998,"calf":8,"date":"\/date(1302899617070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":6,"weight":190.3,"neck":9.5857142857142872,"chest":33.6,"bicept":12.2,"waist":31.5,"hip":31.5,"thigh":15.399999999999999,"calf":7.8000000000000007,"date":"\/date(1302986017070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":7,"weight":189.3,"neck":9.4428571428571431,"chest":33.4,"bicept":12,"waist":31,"hip":31,"thigh":15.2,"calf":7.6000000000000005,"date":"\/date(1303072417070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":8,"weight":188.3,"neck":9.3,"chest":33.2,"bicept":11.799999999999999,"waist":30.5,"hip":30.5,"thigh":14.999999999999998,"calf":7.4,"date":"\/date(1303158817070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":9,"weight":187.3,"neck":9.1571428571428584,"chest":33,"bicept":11.6,"waist":30,"hip":30,"thigh":14.799999999999999,"calf":7.2000000000000011,"date":"\/date(1303245217070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":10,"weight":186.3,"neck":9.0142857142857142,"chest":32.800000000000004,"bicept":11.399999999999999,"waist":29.5,"hip":29.5,"thigh":14.599999999999998,"calf":7.0000000000000009,"date":"\/date(1303331617070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":11,"weight":185.3,"neck":8.8714285714285719,"chest":32.6,"bicept":11.2,"waist":29,"hip":29,"thigh":14.399999999999999,"calf":6.8000000000000007,"date":"\/date(1303418017070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":12,"weight":184.3,"neck":8.72857142857143,"chest":32.4,"bicept":11,"waist":28.5,"hip":28.5,"thigh":14.2,"calf":6.6000000000000005,"date":"\/date(1303504417070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":13,"weight":183.3,"neck":8.5857142857142872,"chest":32.2,"bicept":10.799999999999999,"waist":28,"hip":28,"thigh":13.999999999999998,"calf":6.4,"date":"\/date(1303590817070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":14,"weight":182.3,"neck":8.4428571428571431,"chest":32,"bicept":10.6,"waist":27.5,"hip":27.5,"thigh":13.799999999999999,"calf":6.2000000000000011,"date":"\/date(1303677217070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":15,"weight":181.3,"neck":8.3,"chest":31.8,"bicept":10.399999999999999,"waist":27,"hip":27,"thigh":13.599999999999998,"calf":6.0000000000000009,"date":"\/date(1303763617070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":16,"weight":180.3,"neck":8.1571428571428584,"chest":31.6,"bicept":10.2,"waist":26.5,"hip":26.5,"thigh":13.399999999999999,"calf":5.8000000000000007,"date":"\/date(1303850017070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":17,"weight":179.3,"neck":8.014285714285716,"chest":31.400000000000002,"bicept":10,"waist":26,"hip":26,"thigh":13.2,"calf":5.6000000000000005,"date":"\/date(1303936417070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":18,"weight":178.3,"neck":7.8714285714285719,"chest":31.200000000000003,"bicept":9.7999999999999989,"waist":25.5,"hip":25.5,"thigh":12.999999999999998,"calf":5.4,"date":"\/date(1304022817070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":19,"weight":177.3,"neck":7.7285714285714295,"chest":31,"bicept":9.6,"waist":25,"hip":25,"thigh":12.799999999999999,"calf":5.2000000000000011,"date":"\/date(1304109217070)\/","timeofday":"morning","dietbehavior":"moderately"},{"id":20,"weight":176.3,"neck":7.5857142857142863,"chest":30.8,"bicept":9.3999999999999986,"waist":24.5,"hip":24.5,"thigh":12.599999999999998,"calf":5.0000000000000009,"date":"\/date(1304195617070)\/","timeofday":"morning","dietbehavior":"moderately"}],"jsonrequestbehavior":1} 

i assuming wrong code not recieving json string. have modified code in many different ways , have been working on over 2 weeks trying work if can explain me doing wrong apposed sending me knockoutjs website examples have not been helpful. thank in advance , saving me growing more gray hairs :/

ps. add also.. use mvcextension friend created had working had data.weightstats or something.. frustrated :/ check out

public static mvchtmlstring knockoutformodel<tmodel>(this ajaxhelper<tmodel> helper, bool includescripttags = true, bool? applykobindings = null)     {         var serializer = new javascriptserializer();          var json = "var viewmodel = ko.mapping.fromjs(" + serializer.serialize(helper.viewdata.model) + ");\r\n";          if (applykobindings.getvalueordefault(includescripttags))         {             json += "ko.applybindings(viewmodel);\r\n";         }          if (includescripttags)         {             json = "<script type=\"text/javascript\">\r\n" + json + "</script>\r\n";         }          return mvchtmlstring.create(json);     } 

$.getjson requires pass callback deal result, request done asynchronously. so, want like:

var viewmodel = {};  $.getjson('weighttracker/list', function(result) {     viewmodel.stats = ko.mapping.fromjs(result.data);     ko.applybindings(viewmodel); }); 

then, based on above template binding like:

<tbody data-bind='template: {name: "statrowtemplate", foreach: stats }'></tbody> 

so, when $.getjson, in callback dealing javascript object , not json string.

would happy out, if have additional issues.