2

私は簡単なknockout.jsページを作ろうとしています:まず、ユーザーはモデルを選択してから車のブランドを選択する必要があります。これは機能します。今私はさらにドアの数を表示したい(4または5)。ノックアウトドロップダウンは、追加情報でお互いに依存しています

しかし、ドアの数(selectedModel().AantalDeuren ')は決して表示されません。私のコードで何が間違っていますか? ps:私はhttp://knockoutjs.com/examples/cartEditor.htmlから開始しました 目標は、既に動作しているmvc-apiのデータを使ってShoppingCartを作ることです。 おかげで、 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> 

答えて

0

あなたはエラーのコンソールをチェックしましたか?

問題は、最初は両方ともundefinedです。データバインドでundefined.modellenundefined.AantalDeurenが検索され、エラーが発生します。

選択は、そのプロパティのいずれかに結合する前に、そこにあるかどうかをチェックすることによってそれを修正:

 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>

関連する問題