2013-09-10 4 views
0

Итак, привет! Я пытался сделать простую простую работу с Knockout.js, но безуспешно. Смотря через форумы и сообщения, но все равно, не повезло!Knockout.js Несколько раскрывающихся списков.

Так что я пытаюсь заполнить несколько выпадающих списков с информацией из ObservableArrays. Это код, который у меня есть. Но ничего не видно, кроме HTML-кода.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Demo</title> 
<script src="Scripts/knockout-2.3.0.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     function location(name, id) { 
      var self = this; 

      self.Name = name; 
      self.Id = id; 
     } 

     function attraction(name, price) { 
      var self = this; 

      self.Name = name; 
      self.Price = price; 
     } 

     function transportation(name, price) { 
      var self = this; 

      self.Name = name; 
      self.Price = price; 
     } 

     function BookingViewModel() { 
      var self = this; 

      self.currentLocation = ko.observableArray([ 
       new location("Istanbul", "0"), 
       new location("Ankara", "1"), 
       new location("Izmir", "2") 
      ]); 
      self.selectedLocation = ko.observable(); 

      self.targetAttraction = ko.observableArray([ 
       new attraction("Aspendos Theatre", "200"), 
       new attraction("Library of Celsus", "150"), 
       new attraction("Hagia Sophia", "140") 
      ]); 
      self.selectedAttraction = ko.observable(); 

      self.transportationMode = ko.observableArray([ 
       new transportation("Walk", "0"), 
       new transportation("Bus", "50"), 
       new transportation("Train", "75") 
      ]); 
      self.selectedTransportation = ko.observable(); 
     } 
     ko.applyBindings(new BookingViewModel()); 
    }); 
</script> 
</head> 
<body> 
<div id="main-content"> 
    <div id="main-search-content"> 
     From: <select data-bind=" 
      options: currentLocation, 
      optionsText: 'name', 
      optionsValue: 'name', 
      optionsCaptation: 'Select....' 
     "></select> 
     To: <select data-bind=" 
      options: targetAttraction, 
      optionsText: 'name', 
      optionsValue: 'price', 
      optionsCaptation: 'Select....' 
     "></select> 
     How: <select data-bind=" 
      options: transportationMode, 
      optionsText: 'name', 
      optionsValue: 'price', 
      optionsCaptation: 'Select....' 
     "></select> 
    </div> 

</div> 

Как вы уже догадались, им достаточно новое для JavaScript в целом, но я делаю все возможное, чтобы попытаться узнать. ive сделал все уроки на веб-сайте, но до сих пор это не помогло мне найти решение. Признать ЛЮБОЙ помощи или намеков.

С наилучшими пожеланиями,

+0

Вы использовали '$ (document)', но вы не включили jQuery. –

+0

Добавлено теперь, спасибо, я полностью пропустил это. Тем не менее, никаких изменений нет. –

ответ

1

optionsText и optionsValue значения чувствительны к регистру, поэтому вам нужно 'Name', не 'name'.

Here's a fiddle этой работы как следует.

+0

Спасибо! Теперь это работает правильно! –

Смежные вопросы