नॉकआउटजेएस मैपिंग प्लगइन और एमवीसी 3

Question

का उपयोग करके एक मूल ग्रिड बनाएं मैंने उच्च और निम्न खोज की है और विभिन्न पैटर्न की कोशिश की है लेकिन ऐसा लगता है कि मैं इसे सही काम करने के लिए नहीं मिल सकता। एक बार जब मैं इसे काम करने के लिए मिला तो मुझे इतना कोड मिला कि मुझे एक आसान तरीका होना था और अब यह पूरी तरह टूटा हुआ था। मेरा लक्ष्य ... इस ग्रिड लोड के लिए केओ मैपिंग और एमवीसी का उपयोग करने के मूलभूत सिद्धांतों को समझने के लिए .. और संभवतः इसे अपडेट करने के लिए एक फॉर्म का उपयोग करें। मुझे कोई भी उदाहरण नहीं मिल रहा है जो मेरी स्थिति के लिए काम कर रहा है। यहां मैं अभी भी नीचे हूं।

यहाँ मेरी लड़ाई है:

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; } 

} 

यहाँ मेरी टेम्पलेट लाइन है:

public JsonResult List() 
    { 
     var result = new JsonResult(); 
     result.Data = _service.GetWeightStats(); 

     return Json(result, JsonRequestBehavior.AllowGet); 
    } 

यहाँ मेरी कक्षा है

<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> 

:

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

यहाँ मेरी टेम्पलेट है

यहाँ मेरी KO जे एस है:

<script type="text/javascript"> 

var data = $.getJSON('WeightTracker/List'); 

var viewModel = ko.mapping.fromJSON(data); 

ko.mapping.updateFromJSON(viewModel, data); 

ko.applyBindings(viewModel); 

JSON कार्रवाई से वापस हो रही है:

{"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} 

मैं अब यह सोचते हैं रहा हूँ मैं इस कोड के साथ पूरी तरह से गलत हूँ मैं कुछ भी प्राप्त नहीं कर रहा हूँ के रूप में वापस लेकिन JSON स्ट्रिंग। मैंने कोड को कई अलग-अलग तरीकों से संशोधित किया है और मैं इसे काम करने के लिए 2 सप्ताह से अधिक समय तक इस पर काम कर रहा हूं ताकि कोई मुझे समझा सके कि मैं मुझे नॉकआउटज वेबसाइट उदाहरणों को भेजने के लिए गलत क्या कर रहा हूं, जो नहीं है सहायक रहा आपकी मदद के लिए अग्रिम धन्यवाद और मुझे और भी ग्रे रंगों से बढ़ने से बचाने:/

पीएस। भी .. भी इस के लिए जोड़ .. मैं इस mvcextension एक दोस्त बनाया है कि जो मैं काम कर रहा था उपयोग करना चाहते हैं, लेकिन मैं data.WeightStats या कुछ और की तरह कुछ करना ही था तो निराश:/यह की जाँच

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); 
    } 

Answer 1

$ .getJSON आपको परिणाम से निपटने के लिए कॉलबैक पास करने की आवश्यकता है, क्योंकि अनुरोध अतुल्यकालिक रूप से किया जाता है। फिर अपने टेम्पलेट से ऊपर के आधार पर कैसा दिखेगा बाध्यकारी

var viewModel = {}; 

$.getJSON('WeightTracker/List', function(result) { 
    viewModel.stats = ko.mapping.fromJS(result.Data); 
    ko.applyBindings(viewModel); 
}); 

,:

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

इसलिए, जब आप $ .getJSON करते हैं, कॉलबैक में आप करेंगे तो, आप की तरह कुछ करने के लिए चाहते हो जाएगा जावास्क्रिप्ट ऑब्जेक्ट से निपटने के लिए और JSON स्ट्रिंग नहीं।

यदि आपके पास अतिरिक्त समस्याएं हैं, तो आपकी मदद करने में प्रसन्नता होगी।