Question

我试图制作一个简单的knockout.js-page：首先，用户需要选择汽车品牌，之后是模型。这有效。现在我还想要显示门的数量（4或5）。

但门的数量（selectedModel（）。AantalDeuren＆＃39;）从未显示过。我的代码出了什么问题？ 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>

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>

击倒下拉依赖于彼此的附加信息

1 个答案: