knockout dropdown voneinander abhängig mit zusätzlichen Informationen

Ich versuche, eine einfache knockout.js-Seite zu machen: Zuerst muss der Benutzer eine Automarke auswählen, danach ein Modell. Das funktioniert. Jetzt möchte ich zusätzlich die Anzahl der gezeigten Türen (4 oder 5).knockout dropdown voneinander abhängig mit zusätzlichen Informationen

Aber die Anzahl der Türen (selectedModel(). AantalDeuren ') werden nie angezeigt. Was ist falsch an meinem Code? ps: Ich habe angefangen von http://knockoutjs.com/examples/cartEditor.html Ziel ist es, ein ShoppingCart, mit Daten von MVC-API, die bereits funktioniert. Danke, 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>

Quelle

2017-01-03 BBit

Haben Sie die Konsole für Fehler?

Das Problem ist, dass zunächst beide Auswahlen undefined sind. Ihre Datenbindungen suchen nach undefined.modellen und undefined.AantalDeuren, was zu Fehlern führt.

Fix es durch Prüfen, ob es eine Auswahl gibt, bevor zu einem seiner Bindungseigenschaften:

 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>

Quelle

2017-01-03 13:47:07 user3297291

knockout dropdown voneinander abhängig mit zusätzlichen Informationen

Antwort

Verwandte Themen