淘汰赛下拉菜单相互依赖，附加信息

Question

我正在尝试制作一个简单的 knockout.js 页面：首先，用户需要 select 一个汽车品牌，然后是一个型号。这行得通。现在我还想要显示的门数（4 或 5）。

但从未显示门数 (selectedModel().AantalDeuren')。我的代码有什么问题？ ps：我从 http://knockoutjs.com/examples/cartEditor.html 开始目标是使用来自 mvc-api 的数据制作一个 ShoppingCart，它已经在工作了。谢谢，布拉姆

<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>

Answer 1

您检查控制台是否有错误？

问题是最初，两个选择都是 undefined。您的数据绑定查找 undefined.modellen 和 undefined.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>

淘汰赛下拉菜单相互依赖，附加信息

knockout dropdown depend on each other with additional info

javascript

shopping-cart

html-select

selection

knockout.js