如何使用敲除js循环显示文本

Question

使用knocoutJs选择品牌和型号时，如何在div循环中显示文本和年份

赞

Mercedes> C

* C-180

* 2016

---

* C-200

* 2015

HTML

<select data-bind="options: manufacturers, optionsCaption:'Brand', optionsText: 'text', optionsValue: 'value', value: selectedManufacturer"></select>
<select data-bind="options: models, optionsCaption:'Model', optionsText: 'text', optionsValue: 'value', value: selectedModel, enable: models().length"></select>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-debug.js">

JavaScript（KnockoutJS）

function ViewModel(items) {
    this.manufacturers = ko.observableArray(items);
    this.selectedManufacturer = ko.observable();
    this.selectedModel = ko.observable();

    function getById(items, value) {
        if(!value) {
            return [];
        }

        var result = ko.utils.arrayFirst(items, function(item) {
            return item.value === value;
        });

        return result && result.childItems || [];
    }

    this.models = ko.computed(function(){
        var items = this.manufacturers();
        var id = this.selectedManufacturer()
        return getById(items, id);
    }, this);
}

var items = [
    { text: 'Ford', value: 1, childItems:
     [
         { text: 'Mustang', value: 1, childItems:
          [
              { text: 'Shelby GT 350', year: "2015", value: 1, childItems: [] },
              { text: 'Shelby GT 500', year: "2017", value: 2, childItems: [] }
          ]
         },
         { text: 'Focus', value: 2, childItems:
          [
              { text: 'Focus RS', year: "2017", value: 3,  childItems: [] },
              { text: 'Focus S', year: "2014", value: 4,   childItems: [] }
          ]
         }
     ]
    },
    { text: 'Mercedes', value: 2, childItems:
     [
         { text: 'S', value: 5, childItems:
          [
              { text: 'S-400', year: "2018", value: 5, childItems: [] },
              { text: 'S-350', year: "2014", value: 6, childItems: [] }
          ]
         },
         { text: 'C', id: 6, childItems:
          [
              { text: 'C-180', year: "2016", value: 7, childItems: [] },
              { text: 'C-200', year: "2015", value: 8, childItems: [] }
          ]
         }
     ]
    }
];

var module = {};

module.viewModel = new ViewModel(items);

ko.applyBindings(module.viewModel);

Answer 1

从第二个下拉列表中删除optionsValue绑定。现在，selectedModel包含实际对象，而不仅仅是原始ID。

然后，使用with绑定绑定到所选内容，并使用foreach: childItems遍历不同的选项。要呈现text和year，可以使用text绑定：

function ViewModel(items) {
    this.manufacturers = ko.observableArray(items);
    this.selectedManufacturer = ko.observable();
    this.selectedModel = ko.observable();

    function getById(items, value) {
        if(!value) {
            return [];
        }

        var result = ko.utils.arrayFirst(items, function(item) {
            return item.value === value;
        });

        return result && result.childItems || [];
    }

    this.models = ko.computed(function(){
        var items = this.manufacturers();
        var id = this.selectedManufacturer()
        return getById(items, id);
    }, this);
}

var items = [
    { text: 'Ford', value: 1, childItems:
     [
         { text: 'Mustang', value: 1, childItems:
          [
              { text: 'Shelby GT 350', year: "2015", value: 1, childItems: [] },
              { text: 'Shelby GT 500', year: "2017", value: 2, childItems: [] }
          ]
         },
         { text: 'Focus', value: 2, childItems:
          [
              { text: 'Focus RS', year: "2017", value: 3,  childItems: [] },
              { text: 'Focus S', year: "2014", value: 4,   childItems: [] }
          ]
         }
     ]
    },
    { text: 'Mercedes', value: 2, childItems:
     [
         { text: 'S', value: 5, childItems:
          [
              { text: 'S-400', year: "2018", value: 5, childItems: [] },
              { text: 'S-350', year: "2014", value: 6, childItems: [] }
          ]
         },
         { text: 'C', id: 6, childItems:
          [
              { text: 'C-180', year: "2016", value: 7, childItems: [] },
              { text: 'C-200', year: "2015", value: 8, childItems: [] }
          ]
         }
     ]
    }
];

var module = {};

module.viewModel = new ViewModel(items);

ko.applyBindings(module.viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="options: manufacturers, optionsCaption:'Brand', optionsText: 'text', optionsValue: 'value', value: selectedManufacturer"></select>
<select data-bind="options: models, optionsCaption:'Model', optionsText: 'text', value: selectedModel, enable: models().length"></select>

<div data-bind="with: selectedModel">

  <ul data-bind="foreach: childItems">
    <li>
      <p data-bind="text: text"></p>
      <p data-bind="text: year"></p>
    </li>
  </ul>

</div>

请注意，您可以在逻辑的第一部分中使用相同的方法。删除optionsValue绑定，并使用实际的对象引用作为选择。这使您可以完全跳过getById逻辑！

function ViewModel(items) {
    this.manufacturers = ko.observableArray(items);
    this.selectedManufacturer = ko.observable();
    this.selectedModel = ko.observable();

    this.models = ko.computed(function(){
        return this.selectedManufacturer() &&
               this.selectedManufacturer().childItems || [];
    }, this);
}

var items = [
    { text: 'Ford', value: 1, childItems:
     [
         { text: 'Mustang', value: 1, childItems:
          [
              { text: 'Shelby GT 350', year: "2015", value: 1, childItems: [] },
              { text: 'Shelby GT 500', year: "2017", value: 2, childItems: [] }
          ]
         },
         { text: 'Focus', value: 2, childItems:
          [
              { text: 'Focus RS', year: "2017", value: 3,  childItems: [] },
              { text: 'Focus S', year: "2014", value: 4,   childItems: [] }
          ]
         }
     ]
    },
    { text: 'Mercedes', value: 2, childItems:
     [
         { text: 'S', value: 5, childItems:
          [
              { text: 'S-400', year: "2018", value: 5, childItems: [] },
              { text: 'S-350', year: "2014", value: 6, childItems: [] }
          ]
         },
         { text: 'C', id: 6, childItems:
          [
              { text: 'C-180', year: "2016", value: 7, childItems: [] },
              { text: 'C-200', year: "2015", value: 8, childItems: [] }
          ]
         }
     ]
    }
];

var module = {};

module.viewModel = new ViewModel(items);

ko.applyBindings(module.viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<select data-bind="options: manufacturers, optionsCaption:'Brand', optionsText: 'text', value: selectedManufacturer"></select>
<select data-bind="options: models, optionsCaption:'Model', optionsText: 'text', value: selectedModel, enable: models().length"></select>

<div data-bind="with: selectedModel">

  <ul data-bind="foreach: childItems">
    <li>
      <p data-bind="text: text"></p>
      <p data-bind="text: year"></p>
    </li>
  </ul>

</div>