カスタム要素にアタッチフォーカスを使用するAureliaダイアログ

Question

私はattach-focus="true"をカスタム要素の内部要素の1つに渡そうとしています。これにより、aureliaダイアログが開いたときに正しい要素がフォーカスを受け取るようになります。

カスタム要素：列挙-する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> 

カスタム要素：列挙-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; 
} 

ダイアログテンプレート：編集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。私はダッシュが干渉していると思うが、私はそれを修正する方法を知らない。

私の好みでは、カスタムコントロールのインスタンス化に、INPUTやSELECTのような通常の要素と一致するように標準のパラメータattach-focus="true"（ダッシュ付き）があるように修正します。

Answer 1

あなたはエラーの原因について正しいですが、property-nameにダッシュを含むことはできません。それはproperty - nameと読みます。

ありキャメルケースの表記にダッシュ表記から属性と要素名をマッピングするアウレリアのコンベンション（link to docs、ダッシュケースの検索が）あるので、あなたのモデルにあなたが@bindable attachFocusとしてあなたのバインド可能プロパティの名前を指定するかどうか - あなたができるようになりますあなたのビューでattach-focus.bind = "true"としてそれを使用する。

また、ビュー内のカスタム要素/属性を<require>にしてください。また、aureliaを構成するときにグローバルに使用できるようにしてください。