knockoutjs - ko.mapping.fromJS ne fonctionne pas

J'ai juste commencé à essayer knockout.js. Le ko.la cartographie offre une chouette façon d'obtenir et de la carte de données à partir du serveur. Cependant, je ne suis pas en mesure d'obtenir la cartographie de travail.

J'ai un modèle simple:

//var helloWorldModel;
var helloWorldModel = {
    name: ko.observable('Default Name'),
    message: ko.observable('Hello World Default')
};


$(document).ready(function() {
  ko.applyBindings(helloWorldModel);
      //a button on the form when clicked calls a server class 
      //to get json output
  $('#CallServerButton').click(getDataFromServer);
});

function getDataFromServer() {
  $.getJSON("HelloSpring/SayJsonHello/chicken.json", function(data) { 
    mapServerData(data);
  });
}

function mapServerData(serverData) {
  helloWorldModel = ko.mapping.fromJS(serverData, helloWorldModel);
  alert(JSON.stringify(serverData));
}

La helloWorldModel a seulement 2 attributs - exactement la même chose que j'retour à partir du serveur. L'alerte dans mapServerData montre -

{"name":"chicken","message":"JSON hello world"}

J'ai regardé les autres posts concernant ce genre de problème, mais aucun d'eux ne semblait être résoudre ce problème. Peut-être que je suis absent quelque chose de très simple: vous vous demandez si quelqu'un peut le point.

Également noter que si je ne déclare pas le modèle initial et l'utilisation

 helloWorldModel = ko.mapping.fromJS(serverData);

c'est la cartographie de données de mon formulaire correctement.

source d'informationauteur 6ton

  1. 21

    De Richard répondre et puis un peu plus enquête sur ce je pense que la façon dont j'ai été l'initialisation du modèle est incorrect. Je suppose qu'on ne peut pas utiliser un modèle de vue et ensuite espérer qu'il fonctionne avec le mappeur de plugin. Ainsi, au lieu de l'initialisation de la vue du modèle avec des données JSON à l'aide de la ko.la cartographie.fromJS:

    var helloWorldModel;

$(document).ready(function() {
  var defaultData = {
      name: 'Default Name',
      message: 'Hello World Default'
  };

  helloWorldModel = ko.mapping.fromJS(defaultData);
  ko.applyBindings(helloWorldModel);
  $('#CallServerButton').click(getDataFromServer);
});

function getDataFromServer() {
  $.getJSON("HelloSpring/SayJsonHello/chicken.json", function(data) { 
    mapServerData(data);
  });
}

function mapServerData(serverData) {
  alert(JSON.stringify(serverData));
  ko.mapping.fromJS(serverData, helloWorldModel);
}

    Ce code fonctionne et fournit le comportement attendu

  2. 14

    Vous ne pouvez pas écraser votre modèle en réaffectant de cette façon.

    Lorsque vous faites:

    ko.applyBindings(helloWorldModel);

    Vous dites "lier le modèle helloWorldModel à la page". Knock-out passe ensuite à travers et raccorde les phénomènes observables dans ce modèle et les lie avec la page.

    Maintenant, lorsque vous écraser votre modèle de formulaire ici:

    helloWorldModel = ko.mapping.fromJS(serverData, helloWorldModel);

    Il est d'écraser votre modèle objet avec un tout nouvel objet avec de tous nouveaux observables.

    À fixer, il vous suffit de modifier cette ligne pour seulement:

    ko.mapping.fromJS(serverData, helloWorldModel);

    Cela prend en charge les propriétés à l'intérieur du modèle et réassigne pour vous, sans écraser votre modèle.