KnockoutJs Bindungsproblem in der Auswahlliste

Question

Ich verwende Typescript mit KnockoutJs und ich habe Probleme mit der Bindung der Optionen Text und OptionenWert. Das Modell ist:

export interface LanguageProxy { 
    ID: number; 
    Name: string; 
    Code: string; 
    IsSparse: boolean; 
    HasAudio: boolean; 
    ReadsRightToLeft: boolean; 
    IsAsian: boolean; 
    ShortCode: string; 
    LongCode: string; 
    CultureCode: string; 
    IsEnabled: boolean; 
    IsCustom: boolean; 
} 

wir die Bindung als (Antwort eine Antwort von einem Webservice-Aufruf ist) einrichten:

var langs = ko.observableArray([]); 
     response.LanguageProxyListResult.forEach(lang => { 
      langs.push(ko.observable(lang)); 
     }); 

     this.Languages = langs; 
     ko.applyBindings(this, jQuery("#QuickSearchContainer")[0]); 

und wir sind verbindlich den folgenden HTML verwenden unter:

<select name="ddlLanguage" id="ddlLanguage" class="LanguageList" 
           data-bind="options: Languages, 
              optionsText: 'Name', 
              optionsValue: 'ID', 
              optionsCaption: 'Choose...', 
              optionsAfterRender: function (e) { jQuery('#ddlLanguage')[0].selectedIndex = 1;}"> 

          </select> 

Die Daten werden korrekt gebunden. Wenn Sie die Optionen text und optionsValue entfernen, wird die Liste von [object] [OBJECT] zurückgegeben, aber beim Hinzufügen der Eigenschaften von optionsText und value wird eine leere Liste erstellt.

Betrachtet man einen Kontext-Debugger von knockoutJS für chrome, erscheinen die Daten korrekt im Element (unter $ data.Languages.Symbol (_latestValue) und dem analysierten Kontext). Gibt es etwas grundsätzlich falsch?

Answer 1

Ich glaube nicht, dass die options Bindung Observablen im Array unterstützt.

Wenn Sie langs.push(ko.observable(lang)); durch nur langs.push(lang); ersetzen, sollte es funktionieren.

Es gibt keinen wirklichen Sinn darin, ein Objekt in Observable zu verpacken, wenn es sich in einem beobachtbaren Array befindet.

Reproduktion des Problems, beachten Sie, dass die zweite select wird einen Fehler werfen.

var opts = ko.observableArray([ 
 
    { name: "Option 1" }, 
 
    { name: "Option 2" } 
 
]); 
 

 

 
var obsObs = ko.observableArray([ 
 
    ko.observable({ name: "Option 1" }), 
 
    ko.observable({ name: "Option 2" }) 
 
]); 
 

 

 
ko.applyBindings({ 
 
    opts: opts, 
 
    obsObs: obsObs 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<select data-bind="options: opts, optionsText: 'name'"></select> 
 
<select data-bind="options: obsOpts, optionsText: 'name'"></select>