如何用knockout js循环显示文字

Question

当 select 品牌和型号使用 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);

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>

如何用knockout js循环显示文字

How to display text in loop with knockout js

javascript

arrays

jquery

nested

knockout.js