Назначение нокаута JS с выбранной опцией

Question

У меня этот ошеломляющий вопрос. У меня 2 выпадающих на моей странице, которые выглядят следующим образом:

<div class="form-group"> 
    <label class="control-label">Current competition</label> 
    <select class="form-control" data-bind="options: competitions, optionsText: 'Name', value: selectedCompetition, optionsCaption: 'Choose...'"></select> 
</div> 

<div class="form-group"> 
    <label class="control-label">Style</label> 
    <select class="form-control" data-bind="options: styles, optionsText: 'Name', value: selectedStyle, optionsCaption: 'Choose...'"></select> 
</div> 

соревнование один работает отлично, но стили один никогда не выбирает ничего, кроме Выбрать .... мой взгляд модель имеет метод Initialise который выглядит следующим образом:.

function init() { 
    $.get(competitionsUrl) 
     .done(function (data) { 
      $.each(data, function (i, competition) {      
       self.competitions.push(competition); 

       if (competition.Current) { 
        self.selectedCompetition(competition); 
        self.selectedStyle(competition.Style); 
       } 
      }); 
     }) 
     .always(function() { 
      self.loading(false); 
     }) 
     .fail(common.handleError); 

    $.get(stylesUrl) 
     .done(function (data) { 
      $.each(data, function (i, style) { 
       self.styles.push(style); 
      }); 
     }) 
     .fail(common.handleError); 
}; 

Теперь, это где Забавная часть приходит в случае, если я ставлю console.log (self.selectedStyle()) непосредственно после ввода установите его, я получаю undefined в консоли. Потребовалось некоторое время, но я понял, что если я изменить свой стиль выбора для этого:

<div class="form-group"> 
    <label class="control-label">Style</label> 
    <select class="form-control" data-bind="options: styles, optionsText: 'Name'"></select> 
</div> 

Затем моя консоль возвращает правильный выбранный стиль. Итак, что происходит, так это то, что поле выбора фактически устанавливает мой selectedStyle неопределенным. Почему это происходит только в раскрывающемся списке стиля, а не на соревнованиях меня озадачивает.

Кто-нибудь испытал это раньше и, возможно, знает о решении?

На всякий случай, это моя вся модель обзора.

function SettingsViewModel(app, dataModel) { 
    var self = this, 
     competitionsUrl = "/api/competitions", 
     stylesUrl = "/api/styles"; 

    // Private operations 
    function init() { 
     $.get(competitionsUrl) 
      .done(function (data) { 
       $.each(data, function (i, competition) {      
        self.competitions.push(competition); 

        if (competition.Current) { 
         self.selectedCompetition(competition); 
         self.selectedStyle(competition.Style); 
        } 
       }); 
      }) 
      .always(function() { 
       self.loading(false); 
      }) 
      .fail(common.handleError); 

     $.get(stylesUrl) 
      .done(function (data) { 
       $.each(data, function (i, style) { 
        self.styles.push(style); 
       }); 
      }) 
      .fail(common.handleError); 
    }; 

    function uploadProgress(e, progressBar) { 
     if (e.lengthComputable) { 
      var percentComplete = Math.round(e.loaded * 100/e.total).toString(); 

      common.setProgressValue(progressBar, percentComplete); 
     } 
     else { 
      toastr["warning"](uploadProgressErrorMessage); 

      common.setProgressValue(progressBar, 0); 
     } 
    }; 

    function uploadComplete(file, filePath) { 
     console.log(file); 
     console.log(filePath); 
    }; 

    // Data 
    self.styles = ko.observableArray(); 
    self.competitions = ko.observableArray(); 
    self.selectedStyle = ko.observable(); 
    self.selectedCompetition = ko.observable(); 

    // State 
    self.loading = ko.observable(true); 
    self.saving = ko.observable(false); 

    // Operations 
    self.selectedCompetition.subscribe(function (vm, event) { 
     if (!self.loading()) { 
      self.selectedCompetition().Current = true; 

      self.save(); 
     } 
    }); 

    self.selectedStyle.subscribe(function (vm, event) { 
     if (vm) { 
      self.selectedCompetition().StyleId = vm.Id; 
     } 
    }); 

    self.uploadLogo = function (e) {   
     if (e.target.files && e.target.files[0]) { 
      var file = e.target.files[0]; 

      common.getUrl().done(function (url) { 
       common.generateFolders(0).done(function (folders) { 
        common.uploadFile(url, file, folders, ".logo-progress", uploadProgress, uploadComplete); 
       }); 
      }).fail(function() { 
       toastr["error"]("Failed to get the upload url."); 
      }); 
     } 
    }; 

    self.save = function() { 
     self.saving(true); 

     console.log(self.selectedCompetition()); 

     $.ajax({ 
      url: competitionsUrl, 
      method: "POST", 
      data: self.selectedCompetition() 
     }).done(function() { 
      // Do nothing 
     }).always(function() { 
      self.saving(false); 
     }).fail(common.handleError); 
    }; 

    init(); 

    return self; 
}; 

app.addViewModel({ 
    name: "Settings", 
    bindingMemberName: "settings", 
    factory: SettingsViewModel 
}); 

Любая помощь будет высоко оценена как всегда :)

Answer 1

Как сказал Ганс, это из-за того, как я заселять свои стили. я изменил метод инициализации этого:

function init() { 
    $.get(competitionsUrl) 
     .done(function (data) { 
      var styleId = 0; 

      $.each(data, function (i, competition) {      
       self.competitions.push(competition); 

       if (competition.Current) { 
        self.selectedCompetition(competition); 
        styleId = competition.Style.Id; 
       } 
      }); 

      $.get(stylesUrl) 
       .done(function (data) { 
        $.each(data, function (i, style) { 
         self.styles.push(style); 

         if (style.Id == styleId) { 
          self.selectedStyle(style); 
         } 
        }); 
       }) 
       .always(function() { 
        self.loading(false); 
       }) 
       .fail(common.handleError); 
     }) 
     .fail(common.handleError); 
}; 

, которые исправили проблему.