Tengo una lista de los archivos adjuntos en una página que se genera mediante un jQuery $.ajax llamada y Knockout JS.

Mi HTML parece (esto es despojado de la espalda):

<tbody data-bind="foreach: attachments">
  <tr>
    <td data-bind="text: Filename" />
  </tr>
</tbody>

Tengo una función que obtiene la lista de los archivos adjuntos que se devuelve como una respuesta JSON:

$(function () {
  getFormAttachments();
});

function getAttachments() {
  var request = $.ajax({
    type: "GET",
    datatype: "json",
    url: "/Attachment/GetAttachments"
  });

  request.done(function (response) {
    ko.applyBindings(new vm(response));
  });
}

Mi punto de vista el modelo se parece a:

function vm(response) {
  this.attachments = ko.observableArray(response);
};

Hay un botón de actualización que el uso puede hacer clic para actualizar esta lista debido a que los archivos adjuntos pueden se han añadido/eliminado:

$(function () {
  $("#refresh").on("click", getAttachments);
});

La prestación inicial de la lista de datos adjuntos está bien, sin embargo cuando me llaman getAttachments de nuevo en el botón actualizar haga clic en la lista se agrega a (de hecho, cada elemento se duplica varias veces).

He creado un jsFiddle para demostrar este problema aquí:

http://jsfiddle.net/CpdbJ/137

¿Qué estoy haciendo mal?

Kev – nice post. Todavía estoy un poco confundido. Nuevo a octavos de final. Estoy teniendo problemas similares simplemente cargar un ViewModel con AJAX los datos sobre la carga de la página. Estoy seguro de que me falta un pequeño pero grave punto. una cosa que me confunde es que algunos tutoriales muestra viewmodel como un objeto (ex. var viewmodel = { something: ko.observable() }) y otros como una función de (ex. function ViewModel() { this.something = ko.observable() }) – alguna sugerencia?
ver a mi pregunta de seguimiento: stackoverflow.com/questions/9589419/… – la respuesta y los comentarios de abajo deben hacer las cosas más claras. Me gustaría recomendar el gasto de $25 y viendo este: pluralsight-training.net/microsoft/Courses/…
Voy a echarle un vistazo a tu otra pregunta, gracias. Tengo un pluralsight de suscripción y lo he visto 2 o 3 veces… que apenas arañar la superficie, y mucho de esto es viejo ahora que 2.0 está fuera, estaban usando 1.2 o 1.3 beta…

OriginalEl autor Kev | 2012-03-04

1 Comentario

  1. 10

    Aquí es un violín que corrige su ejemplo. Su problema más grande era que estuviera llamando ‘applyBindings’ varias veces. En general, usted va a llamar applyBindings en la carga de la página y, a continuación, la página va a interactuar con el Modelo de Vista a causa de octavos de final a actualizar partes de la página.

    http://jsfiddle.net/CpdbJ/136

    html

    <table>
        <thead>
            <tr><th>File Name</th></tr>
        </thead>
        <tbody data-bind="foreach: attachments">
          <tr><td data-bind="text: Filename" /></tr>
        </tbody>
    </table>
    <button data-bind="click: refresh">Refresh</button>

    javascript

    $(function () {
      var ViewModel = function() {
        var self = this;
    
        self.count = 0;
        self.getAttachments = function() {
          var data = [{ Filename: "f"+(self.count*2+1)+".doc" },
                      { Filename: "f"+(self.count*2+2)+".doc"}];
          self.count = self.count + 1;
          return data;
        }
    
        self.attachments = ko.observableArray(self.getAttachments());
    
        self.refresh = function() {
          self.attachments(self.getAttachments());        
        }
      };
    
      ko.applyBindings(new ViewModel());
    });

    También puede que desee ver en la asignación de complemento de http://knockoutjs.com/documentation/plugins-mapping.html. Esto puede ayudarle a transformar JSON a la Vista de los Modelos. Además es capaz de asignar una propiedad para ser la «clave» para un objeto… este va a ser utilizado para determinar la edad vs nuevos objetos en las siguientes asignaciones.

    Aquí es un violín que escribí hace un tiempo para demostrar una idea similar:

    http://jsfiddle.net/wgZ59/276

    NOTA: yo uso «actualizar» como parte de mis reglas de asignación, pero SÓLO por lo que puede iniciar sesión en la consola. Sólo se necesita agregar este si quería personalizar la forma en que la asignación de plugin actualizado objetos.

    ¿Cómo funcionaría esto si decir que no tenía datos, y necesito llamar a un método Ajax y su un GET?
    Simplemente cambiar el getAttachments llamar para hacer la llamada AJAX, y en la devolución de llamada establecer directamente los resultados en los archivos adjuntos observables de la matriz. Actualización acaba de llamar yo.getAttachments(). los archivos adjuntos se inicializaría vacía y, a continuación, usted podría llamar de inmediato a sí mismo.getAttachments() para hacer la primera llamada AJAX. Una vez que la devolución de los conjuntos de los resultados knock-out se encargará de actualizar la interfaz de usuario.
    Hmm, por alguna razón que no puedo actualizar mis datos con este método, vea mi pregunta: stackoverflow.com/questions/21558075/…

    OriginalEl autor

Dejar respuesta

Please enter your comment!
Please enter your name here