Нокаут: Привязка к отборной-наблюдаемым возвращает ничего

Question

Следуя примеру 3 в этом Нокаут-пример: http://knockoutjs.com/documentation/options-binding.html

У меня есть список спортивных объектов-я выбрать с помощью выпадающего меню. Каждый спортивный объект имеет список категорий, которые я перебираю, исходя из того, какой вид спорта выбран. В настоящее время это работает.

Теперь мне нужно получить название выбранного в данный момент спорта, чтобы я мог использовать его в CRUD-операциях. В приведенном ниже примере я пытаюсь сохранить его в скрытом поле, которое не работает должным образом, оставив атрибут value в поле пустым.

Итак, как я могу получить имя (или любое другое наблюдаемое в модели) из выбранного значения в раскрывающемся списке?

Код ниже показывает модель и HTML я использую:

<select id="categorySelector" class="form-control" data-bind="options: Sports, optionsText: 'Name', value: SelectedSport"></select> 
    <table data-bind="foreach: SelectedSport"> 
     <tbody data-bind="foreach: Categories"> 
      <tr data-bind="attr: { 'data-name': Name }"> 
       <td data-bind="text: Name"></td> 
      </tr> 
     </tbody> 
    </table> 
    <input type="hidden" data-bind="value: $root.SelectedSport.Name" /> 
    <span data-bind="text: SelectedSport.Name"></span> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script> 
    <script> 
     var CategoryModel = function (name) { 
      var self = this; 
      self.Name = ko.observable(name); 
     }; 
     var SportModel = function (name) { 
      var self = this; 
      self.Name = ko.observable(name); 
     }; 
     var ViewModel = function() { 
      var self = this; 
      self.Sports = ko.observableArray(); 
      self.SelectedSport = ko.observable(); 

      self.GetSports = function() { 
       $.getJSON('data.json', function (data) { 
        $.each(data, function (sportIndex, sportValue) { 
         if (sportValue.hasOwnProperty('name')) { 
          var newSport = new SportModel(sportValue.name); 
          console.log(sportValue.name); 
          $.each(sportValue.categories, function (categoryIndex, categoryValue) { 
           if (categoryValue.hasOwnProperty('name')) { 
            newSport.Categories.push(new CategoryModel(categoryValue.name)); 
            console.log('--' + categoryValue.name); 
           } 
          }); 
          self.Sports.push(newSport); 
         } 
        }); 
       }) 
       .fail(function() { 
        console.log("Failed to load and/or parse bikeData.json"); 
       }); 
      }; 
     }; 
     var viewModel = new ViewModel(); 
     ko.applyBindings(viewModel); 
     viewModel.GetSports(); 
    </script> 

Файл Json:

[ 
    { 
     "name": "Archery", 
     "categories": [ 
      { "name": "Världsmästerskap" }, 
      { "name": "Vintermästerskap" } 
     ] 
    }, 
    { 
     "name": "Bike", 
     "categories": [ 
      { "name": "Världsmästerskap" }, 
      { "name": "Europamästerskap" } 
     ] 
    } 
] 

Answer 1

Я нашел ответ: вам нужно проверить, есть ли действительно значение выбрано и если нет, вставить значение по умолчанию, например, так:

<input type="hidden" data-bind="value: SelectedSport() ? SelectedSport().Name : 'unknown'" /> 

пример на нокаут-сайте показал это.