Définition de la valeur de la liste de sélection dans Knockout.JS

J’essaie de renseigner une table d’entrées (zones de texte et liste de sélection) avec des données JSON extraites d’une demande jQuery GET. Pour l’exemple, je prédéfinis une variable avec certaines données plutôt que de faire une requête get. Les entrées de la zone de texte remplissent correctement les données, mais les listes de sélection ne seront pas renseignées.

Voici un exemple des données que Knockout reçoit et place dans la table.

var returnedData = [{ "taskID": "1", "taskName": "test task", "taskDetails": "details", "employee": { "employeeID": "1", "employeeName": "John" } }, { "taskID": "2", "taskName": "another test", "taskDetails": "some more details", "employee": { "employeeID": "2", "employeeName": "Jane" } }]; 

Sur les didacticiels officiels, ils utilisent une zone de texte (je l’ai incluse dans le violon) pour montrer comment les données sont formatées lorsqu’elles sont postées sur le serveur. Les données préchargées sont exactement au même format.

Quoi qu’il en soit, voici un violon avec le code.

La raison pour laquelle les listes de sélection ne seront pas renseignées est l’égalité d’object. Ils sont liés au tableau observable availableEmployees avec la liaison d’options et la liaison de valeur est Employee, mais lorsque vous définissez la propriété employee de chaque tâche, vous le définissez sur un nouvel object avec les mêmes propriétés et valeurs, qui n’est pas égal en javascript. Ce que je ferais, c’est réellement (mon exemple a une terrible recherche de boucle, juste pour vous montrer ce que je veux dire) pour l’employé correspondant dans votre liste d’employés disponibles, et réglez cet employé sur cet object, et non sur l’object à partir de l’info de la tâche. Regarde ça:

 var returnedData = [{ "taskID": "2", "taskName": "test task", "taskDetails": "details", "employee": self.availableEmployees()[1] }, { "taskID": "5", "taskName": "another test", "taskDetails": "some more details", "employee": self.availableEmployees()[2] }]; 

En effet, en javascript:

 var a = { foo: 1, bar: 'baz'}; var b = { foo: 1, bar: 'baz'}; console.log(a == b); // false 

JSFiddle