奥蕾莉亚选择不正确绑定

Aurelia Select Not Binding Properly

本文关键字：不正确 绑定 选择      更新时间：2023-09-26

我有以下组件:

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>

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

在父VM中，语言和selectedLanguage的计算方式如下，当我检查它们时，它们都返回一个值:

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

语言被正确填充，但是所选择的语言没有。会话对象中的两个方法都指向同一个数组。请告诉我哪里做错了。

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

提前感谢

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

  2. 当声明一个作为"value"的可绑定属性时，将它的默认绑定模式设置为"two - way"。这样，您就可以在模板中使用.bind，而不需要记住使用.two-way="..."显式地双向绑定到属性:

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

  3. 确保你的匹配器函数返回真/假。你的匹配器缺少一个return语句!

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

好了，我刚刚意识到我需要为selectLanguage的可绑定属性使用kebab大小写。

我在你的代码中看到两个问题:

1 -绑定HTML表达式应转换为kebab case。所以，不用

selectedLanguage.bind="selectedLanguage"

应该使用:

selected-language.bind="selectedLanguage"

2 -为什么要使用getter ?你可以直接绑定属性:

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

相关文章：