нокаут js не может связать каскадное выпадающее меню

Я новичок в нокауте и пытаюсь понять, как заполнить второй раскрывающийся список на основе выбора, сделанного в первом. Я основывал свой код на первой скрипте, предоставленной 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>

и джаваскрипт

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

Я просто не вижу проблемы с привязкой ко второму раскрывающемуся списку.


binding html-select cascading knockout.js
person Vlad    schedule 14.01.2013    source источник
comment
Есть много проблем с вашим текущим кодом. У меня нет сейчас времени объяснять их все. Вот рабочий JSFiddle, где вы можете поиграть с ним: jsfiddle.net/wgw53   -  person nemesv    schedule 14.01.2013
comment
Спасибо, что нашли время посмотреть на этот nemesv. Кажется, что нокаутировать нужно больше, чем кажется на первый взгляд из уроков и презентации Стива Сандерсона.   -  person Vlad    schedule 14.01.2013
comment
Было бы здорово, если бы вы могли создать ответ на основе своих знаний и принять его как решение, чтобы другие тоже могли извлечь из него уроки.   -  person delixfe    schedule 09.02.2013

Ответы (1)


arrow_upward
1
arrow_downward

Большое спасибо 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>

и джаваскрипт

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 — плохая идея.

person Vlad    schedule 11.02.2013