cargando un knockout.js observableArray() desde .ajax() llama

Question

esto me desconcierta. debe ser algo pequeño que no estoy viendo. Estoy tratando de cargar un observableArray muy simple en knockout con una llamada 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> 

---

Pregunta: ¿Por qué el éxito llamada AJAX, que es data valor de la variable coincide con el byte por byte del disco valor mecanografiado, no desencadenar la h tml actualizar?

Answer 1

No hay razón para que esto no funcione bien. Como esto demuestra.

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

Me gustaría comprobar que el puesto es en realidad ajax enviando datos JSON y JSON que esa es una matriz y que está siendo analizado correctamente.

Tuve que modificar la llamada ajax para que los manejadores de ajax de violín funcionen correctamente.

No se me ocurre nada más.

Espero que esto ayude.

Answer 2

Esto es error en mi opinión, la muestra de Knockout está trabajando cuando lo usamos con clase contenedora:

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

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

Pero si volvemos resultados directamente no hay manera de obligar a éste. (Sin applyBindings adicionales!)

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

       } 
      } 
     }); 

Use self.vendors no esta viewModel.vendors

Answer 4

Soy demasiado tarde en este caso como me encontré atrapado en esta situación hace poco. Podemos utilizar una función utilitaria de Javascript simple como una solución alternativa.

En lugar de viewModel.vendors(data);, podemos utilizar

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

Se trabajó para mí.

Answer 5

Esto es lo que hice en mi aplicación MVC .net con knockout y 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> 
 
}

que sigue es parte de mi código en la Items2Controller.cs

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

Esperamos que esto ayude. Gracias