javascript - Aurelia 选择未正确绑定(bind)

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>

在父 View 中这样使用:

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

我遇到的问题是，选择不使用 selectedLanguage 作为默认选定选项，而是在匹配器函数中记录 b 的默认空对象。对象已正确记录。

在父虚拟机中，语言和 selectedLanguage 均按如下方式计算，并且在我检查它们时都返回一个值:

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

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

语言已正确填充，但所选语言未正确填充。 session 对象中的两个方法都指向同一个数组。请告知我做错了什么。

每种语言都有一个 id 属性。

提前谢谢

Answer 1

1. 绑定(bind)到混合大小写属性时(例如 @bindable selectedLanguage)，请使用短横线大小写(例如 selected-language.bind="..." >)。这是必需的，因为 DOM 会自动将所有内容小写。

2. 在声明充当“值”的可绑定(bind)属性时，将其默认绑定(bind)模式设置为“双向”。这样，您就可以在模板中使用 .bind，而无需记住使用 .two-way="..." 显式双向绑定(bind)到属性:

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

3. 确保您的匹配器函数返回 true/false。您的匹配器缺少 return 语句!

这是一个已修复所有三个问题的运行示例:https://gist.run/?id=9f96ac9d135fb39f4b7c172a23e6859c