1

私はノックアウトに不慣れで、最初のドロップダウンリストで行った選択に基づいて2番目のドロップダウンリストにデータを入力する方法を作成しようとしています。私はこの会話でrpnによって提供された最初のフィドルに基づいてコードを作成してきました。

これが私のマークアップです

<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);

2番目のドロップダウンへのバインドの問題がわかりません。

4

1 に答える 1

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);

そして、迅速なデリックスに感謝します。ソリューションをjsfiddleだけに残すことが悪い考えである理由を理解しています。

于 2013-02-11T05:24:06.167 に答える