ładowanie obiektu knockout.js observableArray() z .ajax() wywołanie

Question

to zagadki. to musi być coś małego, czego nie widzę. Próbuję załadować bardzo proste observableArray w nokaut z wywołaniem ajax.

javascript

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

html

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

---

Pytanie: Dlaczego udane połączenie Ajax, który znajduje data wartość zmiennej pasuje bajt dla bajcie dysku wpisana wartość, nie wyzwalanie h Odśwież tml?

Answer 1

Nie ma powodu, dla którego nie działałoby to dobrze. Jak to pokazuje.

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

Chciałbym sprawdzić, że po powrocie ajax faktycznie danych JSON i że json jest tablicą i że to jest analizowany poprawnie.

Musiałem poprawić wywołanie ajax, aby uzyskać obsługę procedur ajaxowych fiddle.

Nic więcej nie mogę wymyślić.

Mam nadzieję, że to pomoże.

Answer 2

Jest to bug myślę, próbka Knockout jest pracować, gdy używamy go z klasy otoki:

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

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

Ale jeśli Wyniki powrócić bezpośrednio nie ma sposobu, aby go związać. (Bez dodatkowych 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}); 

       } 
      } 
     }); 

Stosować self.vendors nie to viewModel.vendors

Answer 4

Jestem zbyt późno na ten jeden, jak znalazłem się w tej sytuacji zatrzymany niedawno. Możemy wykorzystać prostą funkcję JavaScript Javascript jako obejście.

Zamiast viewModel.vendors(data);, możemy użyć

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

on pracował dla mnie.

Answer 5

Oto, co zrobiłem w mojej aplikacji MVC .net z nokautem i 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> 
 
}

Po to część mojego kodu na Items2Controller.cs

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

nadzieję, że pomoże. Dzięki