knockout dropdown dépendent les uns des autres avec des informations supplémentaires

J'essaie de faire une simple knockout.js-page: D'abord, l'utilisateur doit sélectionner une marque de voiture, après cela, un modèle. Cela marche. Maintenant, je veux en plus le nombre de portes montrées (4 ou 5).knockout dropdown dépendent les uns des autres avec des informations supplémentaires

Mais le nombre de portes (selectedModel(). AantalDeuren ') n'est jamais affiché. Quel est le problème avec mon code? ps: j'ai commencé à http://knockoutjs.com/examples/cartEditor.html L'objectif est de faire un ShoppingCart, avec des données de mvc-api, qui fonctionne déjà. Merci, bram

<html> 
<head> 
    <title>KnockoutJS Options Binding</title> 
    <script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"; type="text/javascript"> 
    </script> 
</head> 
<body> 
    <table> 
     <tr> 
      <td> 
       <select data-bind="options: availableMerken, optionsText: 'MerkNaam', value: selectedMerk, optionsCaption: 'Kies merk..'"></select> 
      </td> 
      <td> 
       <select data-bind='options: selectedMerk().modellen, optionsText: "ModelNaam", value:selectedModel, optionsCaption: "Kies model.."'> </select> 
      </td> 
      <td> 
       <span data-bind='text: selectedModel().AantalDeuren'> </span> 
      </td> 
     </tr> 
    </table> 

    <script type="text/javascript"> 
     var Model = function (_modelnaam, _aantaldeuren) { 
      var self = this; 
      self.ModelNaam = _modelnaam; 
      self.AantalDeuren = _aantaldeuren; 
     }; 
     var Merk = function (naam, extra1, extra2) { 
      var self = this; 
      self.MerkNaam = naam; 
      self.modellen = ko.observableArray(); 
      self.modellen.push(new Model(extra1, 4)); 
      self.modellen.push(new Model(extra2, 5)); 
      //this.modellen[0] = new Model(extra1, 4); 
      //this.modellen[1] = new Model(extra2, 5); 
     }; 

     function ViewModel() { 
      var self = this; 
      self.selectedMerk = ko.observable(); 
      self.selectedModel = ko.observable(); 
      self.availableMerken = ko.observableArray([ 
             new Merk('vw', 'golf', 'polo'), 
             new Merk('bmw', '3', '5'), 
             new Merk('audi', 'A4', 'A6'), 
             new Merk('mercedes', 'C', 'GLE'), 
             new Merk('ford', 'escort', 'scorpio'), 
             new Merk('opel', 'astra', 'monza'), 
      ]); 
     }; 
     var vm = new ViewModel(); 
     ko.applyBindings(vm); 
    </script> 
</body> 
</html>

Source

2017-01-03 BBit

Avez-vous vérifié la console pour des erreurs?

Le problème est qu'au départ, les deux sélections sont undefined. Vos liaisons de données recherchent undefined.modellen et undefined.AantalDeuren, ce qui entraîne des erreurs.

Fix en vérifiant s'il y a une sélection, avant de se lier à l'une de ses propriétés:

 var Model = function(_modelnaam, _aantaldeuren) { 
 
      var self = this; 
 
      self.ModelNaam = _modelnaam; 
 
      self.AantalDeuren = _aantaldeuren; 
 
     }; 
 
     var Merk = function(naam, extra1, extra2) { 
 
      var self = this; 
 
      self.MerkNaam = naam; 
 
      self.modellen = ko.observableArray(); 
 
      self.modellen.push(new Model(extra1, 4)); 
 
      self.modellen.push(new Model(extra2, 5)); 
 
      //this.modellen[0] = new Model(extra1, 4); 
 
      //this.modellen[1] = new Model(extra2, 5); 
 
     }; 
 

 
     function ViewModel() { 
 
      var self = this; 
 
      self.selectedMerk = ko.observable(); 
 
      self.selectedModel = ko.observable(); 
 
      self.availableMerken = ko.observableArray([ 
 
      new Merk('vw', 'golf', 'polo'), 
 
      new Merk('bmw', '3', '5'), 
 
      new Merk('audi', 'A4', 'A6'), 
 
      new Merk('mercedes', 'C', 'GLE'), 
 
      new Merk('ford', 'escort', 'scorpio'), 
 
      new Merk('opel', 'astra', 'monza'), 
 
      ]); 
 
     }; 
 
     var vm = new ViewModel(); 
 
     ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <select data-bind="options: availableMerken, optionsText: 'MerkNaam', value: selectedMerk, optionsCaption: 'Kies merk..'"></select> 
 
    </td> 
 
    <td data-bind="if: selectedMerk"> 
 
     <select data-bind='options: selectedMerk().modellen, optionsText: "ModelNaam", value:selectedModel, optionsCaption: "Kies model.."'></select> 
 
    </td> 
 
    <td data-bind="if: selectedModel"> 
 
     <span data-bind='text: selectedModel().AantalDeuren'> </span> 
 
    </td> 
 
    </tr> 
 
</table>

Source

2017-01-03 13:47:07 user3297291

knockout dropdown dépendent les uns des autres avec des informations supplémentaires

Répondre

Questions connexes