Aurelia-dialog 在自定义元素上使用附加焦点答案

【问题标题】：Aurelia-dialog using attach-focus on custom elementAurelia-dialog 在自定义元素上使用附加焦点
【发布时间】：2016-11-17 18:39:22
【问题描述】：

我正在尝试将attach-focus="true" 传递给自定义元素的内部元素之一，以便在打开 aurelia-dialog 时正确的元素将获得焦点。

自定义元素：enum-list.html

<template>
  <label class="control-label">${label} DEBUG: ${attach-focus}</label>
  <select class="form-control" value.bind="value" attach-focus.bind="attach-focus">
    <option if.bind="data" repeat.for="code of data | keys" value="${code}">${data[code]}</option>
  </select>
</template>

自定义元素：enum-list.js

import { bindable, bindingMode } from 'aurelia-framework';
export class EnumListCustomElement {
  @bindable label;
  @bindable data;
  @bindable attach-focus; // <-- Maybe the source of the error?
  @bindable({ defaultBindingMode: bindingMode.twoWay }) value;
}

对话框模板：edit-locale.html：

<template>
  <ai-dialog>
    <ai-dialog-header class="modal-header modal-header-success">
      <h4 class="modal-title">Edit Locale</h4>
    </ai-dialog-header>
    <ai-dialog-body>
      <form>
        <enum-list attach-focus="true" label="Language" data.bind="core.enums.SystemLanguage" value.bind="sch_lang"></enum-list>
        <enum-list label="Currency" data.bind="core.enums.CurrencyCode" value.bind="sch_currency"></enum-list>
      </form>
    </ai-dialog-body>
    <ai-dialog-footer>
      <button type="button" click.trigger="dialogController.cancel()">Cancel</button>
      <button type="button" click.delegate="dialogController.ok()">Save</button>
    </ai-dialog-footer>
  </ai-dialog>
</template>

实例化（来自我的 VM js）：

this.dialogService.open({ viewModel: EditLocale, model: this.record, lock: true }).then(response => {

如果我从 edit-locale.js 和自定义元素内部的附加焦点中删除破折号，则模式对话框加载正常。但是使用破折号时，我收到一个错误：Uncaught SyntaxError: Unexpected token import。我认为破折号有干扰，但我不知道如何解决。

我的偏好是修复它，使自定义控件的实例化具有标准参数attach-focus="true"（带有破折号），以便与 INPUT 和 SELECT 等普通元素保持一致。

【问题讨论】：

标签： javascript aurelia

【解决方案1】：

您对错误的来源是正确的，您不能有一个包含破折号的property-name。因为它读作property - name。

aurelia 中有一个约定（link to docs，搜索 dash-case）将属性和元素名称从 dash 表示法映射到 camelCase 表示法，因此如果在您的模型中，您将可绑定属性命名为 @bindable attachFocus - 您将能够在您的视图中使用它作为 attach-focus.bind="true"。

还要确保在您的视图中 <require> 您的自定义元素/属性，或者在配置 aurelia 时使其全局可用。

【讨论】：