Aurelia-dialog使用Attach-重点放在自定义元素上

Question

I'm trying to pass attach-focus="true" to one of the inner elements of a custom element so that the correct element will receive the focus when aurelia-dialog opens.

Custom element: 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>

Custom element: 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;
}

Dialog template: 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>

Instantiation (from my VM js):

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

The modal dialog loads fine if I remove the dashes from attach-focus in edit-locale.js and inside the custom element. But with the dash, I'm getting an error: Uncaught SyntaxError: Unexpected token import . I think the dash is interfering but I don't know how to fix it.

My preference is to fix it so that the instantiation of the custom control has the standard parameter attach-focus="true" (with the dash) so that it's consistent with normal elements like INPUT and SELECT.

Answer 1

You are right about the source of the error, you can't have a property-name containing a dash. Because it reads as property - name .

There is a convention in aurelia ( link to docs , search for dash-case) to map attributes and elements name from dash notation to camelCase notation, so if in your model you will name your bindable property as @bindable attachFocus - you will be able to use it in you views as attach-focus.bind="true".

Also make sure that you <require> your custom elements/attributes in your views or make them globally available when configuring aurelia.