Question

我是淘汰赛的新手，并尝试根据第一个选项中的选择创建如何填充第二个下拉列表。我的代码基于此fiddle中rpn提供的第一个conversation。

这是我的标记

<div data-bind="visible: selectedDate">
  <span data-bind="text: selectedDate() ? selectedDate().logDate : 'unknown'"></span>
</div>
<br />

<div data-bind="visible: selectedDate">
    <select data-bind="options: filenames,
                       optionsText: name
                       value: selectedFiles"
            multiple="true"></select>
</div>

和javascript

var modelData = {Id:1,
                 DownloadFiles: [
                  {LogDate:"01/12/2012",
                   Filenames: [
                     "File.000", "File.001"]},
                  {LogDate:"02/12/2012",
                   Filenames: [
                     "File.000", "File.001", "File.002"]},
                  {LogDate:"03/12/2012",
                   Filenames: [
                     "File.000", "File.001", "File.002", "File.003"]},
                  {LogDate:"04/12/2012",
                   Filenames: [
                     "File.000", "File.001", "File.002", "File.003"]}
                 ]};

function AvailableDate(date, filenames) {
    var self = this;
    self.logDate = ko.observable(date);
    this.filenames = ko.observableArray(ko.utils.arrayMap(filenames || [], function(filename) {
        return new Filename(filename.name);
    }));
}

function Filename(name) {
    this.name = ko.observable(name);    
}
var viewModel = {
    downloadFiles : ko.observableArray(),
    selectedDate : ko.observable(), // Nothing selected by default
    selectedFiles : ko.observableArray() // Nothing selected by default
};

ko.utils.arrayForEach(modelData.DownloadFiles, function(availableDate) {
   viewModel.downloadFiles.push(new AvailableDate(availableDate.LogDate, availableDate.filenames));
});

ko.applyBindings(viewModel);

我无法看到绑定到第二个下拉列表的问题。

Answer 1

非常感谢nemesv提供此解决方案。

这是标记：

<select data-bind="options: downloadFiles,
                   optionsText: 'logDate', 
                   value: selectedDate, 
                   optionsCaption: 'Select Date'"></select>

<div data-bind="visible: selectedDate">
  <span data-bind="text: selectedDate() ? selectedDate().logDate : 'unknown'">
  </span>
</div>
<br />

<div data-bind="visible: selectedDate">
  <!-- ko with: selectedDate -->
    <select data-bind="options: filenames,
                       optionsText: 'name',
                       selectedOptions: $root.selectedFiles"
            multiple="true"></select>
  <!-- /ko -->
  <span data-bind="text: ko.toJSON(selectedFiles())"></span>
</div>

和javascript

var modelData = {Id:1,
             DownloadFiles: [
              {LogDate:"01/12/2012",
               Filenames: [
                 "File.000", "File.001"]},
              {LogDate:"02/12/2012",
               Filenames: [
                 "File.000", "File.001", "File.002"]},
              {LogDate:"03/12/2012",
               Filenames: [
                 "File.000", "File.001", "File.002", "File.003"]},
              {LogDate:"04/12/2012",
               Filenames: [
                 "File.000", "File.001", "File.002", "File.003"]}
             ]};


function AvailableDate(date, filenames) {
    var self = this;
    self.logDate = ko.observable(date);
    this.filenames = ko.observableArray(ko.utils.arrayMap(filenames || [], function(filename) {
        return new Filename(filename);
    }));
}

function Filename(name) {
    this.name = ko.observable(name);    
}
var viewModel = {
    downloadFiles : ko.observableArray(),
    selectedDate : ko.observable(), // Nothing selected by default
    selectedFiles : ko.observableArray() // Nothing selected by default
};

ko.utils.arrayForEach(modelData.DownloadFiles, function(availableDate) {
   viewModel.downloadFiles.push(new AvailableDate(availableDate.LogDate, availableDate.Filenames));
});

ko.applyBindings(viewModel);

谢谢你提示delixfe。我理解为什么只在jsfiddle上留下解决方案是一个坏主意。

淘汰js无法绑定级联下拉列表

1 个答案: