.azax.js को देखकर अराजक() .ajax() से

Question

यह पहेली मुझे लोड करें। यह कुछ छोटा होना चाहिए जो मैं नहीं देख रहा हूं। मैं अजाक्स कॉल के साथ नॉकआउट में एक बहुत ही सरल observableArray लोड करने की कोशिश कर रहा हूं।

जावास्क्रिप्ट

// we bind the array to the view model property with an empty array. 
var data = []; 
var viewModel = { 
    vendors: ko.observableArray(data) 
}; 
ko.applyBindings(viewModel); 

$(function() { 
    // on this click event, we popular the observable array 
    $('#load').click(function() { 
     // WORKS. Html is updated appropriately. 
     viewModel.vendors([{ "Id": "01" },{ "Id": "02" },{ "Id": "03" }]); 

     // DOES NOT WORK. Fiddler2 shows the same exact json string come back 
     // as in the example above, and the success function is being called. 
     $.ajax({ 
      url: '/vendors/10', 
      dataType: 'json', 
      success: function (data) { 
       viewModel.vendors(data); 
      } 
     }); 
    }); 
}); 

एचटीएमएल

<button id="load">Load</button> 
<ul data-bind="template: { foreach: vendors }"> 
    <li><span data-bind="text: Id"></span></li> 
</ul> 

---

प्रश्न: क्यों सफल ajax कॉल, जो data चर मान से मेल खाता है करता बाइट के लिए बाइट मुश्किल टाइप मूल्य, एच ट्रिगर नहीं टीएमएल ताज़ा करें?

Answer 1

कोई कारण नहीं है कि यह ठीक काम नहीं करेगा। जैसा कि यह दर्शाता है।

http://jsfiddle.net/madcapnmckay/EYueU/

मैं जाँच करेगा कि ajax पोस्ट वास्तव में json डेटा लौटा रहा है और कहा कि json एक सरणी है कि और कहा कि यह ठीक प्रकार से पार्स किया जा रहा है।

मुझे पहेली AJAX हैंडलर को सही तरीके से काम करने के लिए AJAX कॉल को ट्विक करना पड़ा।

और कुछ भी नहीं मैं सोच सकता हूं।

उम्मीद है कि इससे मदद मिलती है।

Answer 2

इस बग मुझे लगता है, नॉकआउट के नमूने जब हम आवरण वर्ग के साथ इसका इस्तेमाल काम कर रहा है:

public class ResultWrapper 
{ 
    public Title {get;set;} 
    public List<Result> {get;set;} 
} 

http://learn.knockoutjs.com/#/?tutorial=webmail

लेकिन अगर हम परिणाम लौट सीधे इसमें बाध्य करने के लिए कोई रास्ता नहीं है। (अतिरिक्त applyBindings बिना!)

Answer 3

var self=this; 
//var self first line in model 

$.ajax({ 
      url: ", 
      dataType: "json", 
      contentType: 'application/json', 
      type: "POST", 
      data: JSON.stringify({ }), 
      processdata: true, 

      beforeSend: function() { 
       $.mobile.loading('show'); 
      }, 

      error: function (xhr, textStatus, errorThrown) { 
       alert('Sorry!'); 
      }, 

      success: function (data) { 

       $.mobile.loading('hide'); 
       if (data.result!= '') { 
        self.vendors(data.result); 



       } else { 
        self.vendors({something}); 

       } 
      } 
     }); 

उपयोग self.vendors नहीं इस viewModel.vendors

Answer 4

मैं जिस तरह से भी इस पर देर के रूप में मुझे लगने अभी हाल ही में इस स्थिति में फंस कर रहा हूँ। हम एक साधारण जावास्क्रिप्ट उपयोग फ़ंक्शन का उपयोग कार्य-आसपास के रूप में कर सकते हैं।

के बजाय viewModel.vendors(data);, हम

eval("viewModel.vendors("+JSON.stringify(data)+");");... 

का उपयोग यह मेरे लिए काम किया जा सकता है।

Answer 5

यहां मैंने अपने एमवीसी .net ऐप में नॉकआउट और jquery के साथ किया है।

// Scripts/groItems.js 
 
(function() { 
 

 
    var ViewModel = function() { 
 
     items = ko.observableArray(), 
 
      ItemName = ko.observable(), 
 
      Img = ko.observable(), 
 
      Qty = ko.observable() 
 
    } 
 

 
    $.getJSON('/Items2/AllItems', function (data) { 
 
     for (var i = 0; i < data.length; i++) { 
 
      self.items.push(data[i]); 
 
     } 
 
    }); 
 

 
    var vm = new ViewModel(); 
 

 
    $(function() { 
 
     ko.applyBindings(vm); 
 
    }); 
 

 
}());

@model IEnumerable<GroModel.Item> 
 
@{ 
 
    ViewBag.Title = "Index"; 
 
} 
 

 
<p> 
 
    @Html.ActionLink("Create New", "Create") 
 
</p> 
 

 
<div data-bind="text: items().length"></div> 
 
<table class="container table table-hover"> 
 
    <thead> 
 
     <tr> 
 
      <th>Item name</th> 
 
      <th>img</th> 
 
      <th>qty</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: items"> 
 
     <tr> 
 
      <td data-bind="text: ItemName"></td> 
 
      <td data-bind="text: Img"></td> 
 
      <td data-bind="text: Qty"></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
@section Scripts { 
 
    <script src="~/Scripts/knockout-3.4.2.js"></script> 
 
    <script src="~/Scripts/groItems.js"></script> 
 
}

बाद Items2Controller पर अपने कोड का हिस्सा है।सीएस

private GroContext db = new GroContext(); 
    public JsonResult AllItems() 
    { 
     return Json(db.Items.ToList(), JsonRequestBehavior.AllowGet); 
    } 

आशा इस में मदद मिलेगी। धन्यवाद