淘汰賽js無法綁定級聯下拉列表

我是新來的淘汰賽，並試圖創建如何填充第二個下拉列表基於第一個選擇做出的。我一直在根據conversation中的rpn提供的第一個fiddle代碼。淘汰賽js無法綁定級聯下拉列表

這裏是我的標記

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

我看不出與結合第二個下拉的問題。

來源

2013-01-14 Vlad

當前代碼存在很多問題。我現在沒有時間來解釋所有這些問題。這裏有一個可用的JSFiddle，你可以在這裏玩：http://jsfiddle.net/wgw53/ – nemesv

謝謝你花時間看看這個nemesv。從教程和史蒂夫桑德森的演講中看來，似乎還有更多需要淘汰的東西。 – Vlad

如果您可以根據自己的學習創建答案並將其作爲解決方案接受，以便其他人也可以從中學習，那就太好了。 – delixfe

非常感謝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上留下解決方案是一個壞主意。

來源

2013-02-11 05:24:06 Vlad

淘汰賽js無法綁定級聯下拉列表

回答

相關問題