如何使用淘汰赛js循环显示文本答案

【问题标题】：How to display text in loop with knockout js如何使用淘汰赛js循环显示文本
【发布时间】：2019-04-29 06:34:31
【问题描述】：

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

这样

梅赛德斯>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);

【问题讨论】：

标签： javascript jquery arrays knockout.js nested

【解决方案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>

【讨论】：