Aurelia Auswahl nicht korrekt Bindung

Question

Ich habe die folgende Komponente:

import {inject, customElement, bindable} from 'aurelia-framework'; 
import {I18N} from 'aurelia-i18n'; 
import {Router} from 'aurelia-router'; 
import {HubFactory} from 'service'; 
import {hub} from 'enums'; 

@customElement('language-switcher') 
@inject(Element, I18N, Router, HubFactory) 
export class LanguageSwitcher { 
    languageMatcher = (a, b) => {console.log(a,b); a.id === b.id;} 

    @bindable languages = []; 
    @bindable selectedLanguage = {}; 


    constructor(element, i18n, router, hubFactory) { 
    this.element = element; 
    this.i18n = i18n; 
    this.router = router; 
    this.usmHub = hubFactory.getHub(hub.usersSessionManagementHub); 
    } 


    switchLanguage() { 
    ... 
    } 
} 

mit der folgenden Vorlage:

<template> 
    <form role="language" class="navbar-form navbar-left m-t-1"> 
    <div class="input-group"> 
     <select value.bind="selectedLanguage" change.delegate="switchLanguage()" matcher.bind="languageMatcher" class="form-control"> 
     <option repeat.for="language of languages" model.bind="language">${language.shortName}</option> 
     </select> 
    </div> 
    </form> 
</template> 

, die wie dies in der übergeordneten Ansicht verwendet wird:

<language-switcher languages.bind="languages" selectedLanguage.bind="selectedLanguage"></language-switcher> 

Das Problem, das ich habe, ist, dass die Auswahl nicht die selectedLanguage als die standardmäßig ausgewählte Option und im Matcher-Spaß verwendet ction protokolliert stattdessen das leere Standardobjekt für b. Das Objekt wird ordnungsgemäß protokolliert.

In der übergeordneten VM sowohl die Sprachen und die SelectedLanguage werden wie folgt berechnet und sowohl einen Wert zurückgeben, wenn ich sie überprüfen:

get languages() { 
    return this.session.getSupportedLanguages(); 
    } 

    get selectedLanguage() { 
    return this.session.getDefaultLanguage(); 
    } 

Die Sprachen richtig bevölkert bekommen, aber die gewählte Sprache nicht. Beide Methoden im Sitzungsobjekt zeigen auf dasselbe Array. Bitte geben Sie an, was ich falsch mache.

Jede Sprache hat eine ID-Eigenschaft.

Vielen Dank im Voraus

Answer 1

1. Wenn zu einer gemischten Fall Eigenschaft Bindung (zB @bindable selectedLanguage), Kebab Fall (zB selected-language.bind="..."). Dies ist erforderlich, da das DOM automatisch alles klein macht.

2. Wenn Sie eine bindbare Eigenschaft deklarieren, die als "Wert" dient, legen Sie ihren Standard-Bindungsmodus auf "Zwei-Wege" fest. Auf diese Weise können .bind in Ihren Vorlagen verwenden können und nicht auf die Eigenschaft explizit Zwei-Wege binden sich merken müssen .two-way="..." mit:

   @bindable({ defaultBindingMode: bindingMode.twoWay }) defaultLanguage; 
   

3. Achten Sie darauf, Ihre Matcher Funktion wahr/falsch zurück. Ihrem Matcher fehlt eine return Aussage!

Hier ist ein aktuelles Beispiel für alle drei Probleme behoben: https://gist.run/?id=9f96ac9d135fb39f4b7c172a23e6859c

Answer 2

Ok, ich habe gerade gemerkt, dass ich Kebab Fall für die Select bindable Attribut verwenden müssen.

Answer 3

Ich sehe zwei Probleme in Ihrem Code:

1 - HTML Ausdrücke Bindung sollte Kebab Fall umgewandelt werden. Anstatt also

selectedLanguage.bind="selectedLanguage" 

sollten Sie verwenden:

selected-language.bind="selectedLanguage" 

2 - Alle Gründe für Getter verwenden? Sie könnten die Eigenschaft direkt binden:

Lauf Beispiel https://gist.run/?id=bcd7841ed21616136d5b6ab259a9d9c2