我试图将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
和自定义元素内的attach-focus中删除破折号,则模式对话框将很好地加载。但是随着破折号的出现,我得到一个错误:Uncaught SyntaxError: Unexpected token import
。我认为破折号正在干扰我,但我不知道如何解决。我更喜欢对其进行修复,以使自定义控件的实例化具有标准参数
attach-focus="true"
(带短划线),从而使其与INPUT和SELECT等常规元素保持一致。 最佳答案
您对错误的源是正确的,不能有包含破折号的property-name
。因为它读为property - name
。
aurelia中有一个约定(link to docs,搜索破折号)以将属性和元素名称从破折号表示法映射到camelCase表示法,因此,如果在模型中将可绑定属性命名为@bindable attachFocus
-您将能够以在您的视图中将其用作attach-focus.bind =“ true”。
另外,在配置aurelia时,请确保在视图中<require>
自定义元素/属性,或使其全局可用。