Aurelia選擇未正確綁定

Question

我有以下組成部分：

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() {
    ...
  }
}

使用以下模板：

<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>

在父視圖中這樣使用：

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

我遇到的問題是select不會將selectedLanguage用作默認的選定選項，而是在matcher函數中記錄b的默認空對象。 該對象已正確記錄。

在父VM中，語言和selectedLanguage的計算均如下，當我檢查它們時都返回一個值：

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

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

語言會正確填充，但是所選語言不會正確填充。 會話對象中的兩個方法都指向同一數組。 請告知我在做什么錯。

每種語言都有一個id屬性。

先感謝您

Answer 1

1. 當綁定到混合大小寫屬性（例如@bindable selectedLanguage ）時，請使用@bindable selectedLanguage大小寫（例如selected-language.bind="..." ）。 這是必需的，因為DOM自動將所有內容都小寫。

2. 當聲明一個可綁定屬性作為“值”時，將其默認綁定模式設置為“雙向”。 這樣，您可以在模板中使用.bind ，而無需記住使用.two-way="..."顯式地雙向綁定到屬性：

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

3. 確保您的匹配器函數返回true / false。 您的匹配器缺少return聲明！

這是一個正在解決所有三個問題的運行示例： https : //gist.run/?id=9f96ac9d135fb39f4b7c172a23e6859c

Answer 2

好的，我剛剛意識到我需要為SELECTLANGUAGE可綁定屬性使用kebab大小寫。

Answer 3

我在您的代碼中看到兩個問題：

1-綁定HTML表達式應轉換為kebab大小寫。 所以，代替

selectedLanguage.bind="selectedLanguage"

您應該使用：

selected-language.bind="selectedLanguage"

2-使用吸氣劑的任何原因？ 您可以直接綁定屬性：

運行示例https://gist.run/?id=bcd7841ed21616136d5b6ab259a9d9c2