Aurelia-dialog在自定义元素上使用attach-focus
Aurelia-dialog using attach-focus on custom element
我试图将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
中的附加焦点和自定义元素中删除破折号。但与dash,我得到一个错误:Uncaught SyntaxError: Unexpected token import
。我觉得仪表盘有点干扰,但我不知道怎么修理。
我的偏好是修复它,以便自定义控件的实例化具有标准参数attach-focus="true"
(带破折号),以便它与INPUT和SELECT等正常元素一致。
你对错误的来源是正确的,你不能有一个包含破折号的property-name
。因为它读作property - name
。
在aurelia中有一个约定(链接到文档,搜索破折号大小写)将属性和元素名称从破折号表示法映射到骆驼大小写表示法,所以如果在你的模型中你将你的可绑定属性命名为@bindable attachFocus
-你将能够在你的视图中使用它作为attachment -focus.bind="true"。
还要确保在视图中<require>
自定义元素/属性,或者在配置aurelia时使它们全局可用。
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 在iPad上,如何通过Javascript事件在选择元素上设置focus()而不显示选项
- 似乎无法获得'.focus()'元素工作.
- angular 2中另一个元素的“blur”之后不能“focus”
- 收到错误消息:“未捕获的类型错误:无法读取 null 的属性'焦点'”时尝试调用 focus() 到元素
- 如何在元素上设置默认 focus()
- ng-focus和ng-blur不起作用,而ng-click在输入元素中工作正常
- 由jQuery$.get(..)加载的Focus元素
- Aurelia-dialog在自定义元素上使用attach-focus
- 如果用户键入任何内容,如何使用jquery .focus()元素
- .focus()不能动态处理jQuery创建的元素
- .focus()不关注新元素
- HTML5必需元素,open collapse and focus required元素为空
- 使用JavaScript更改元素的:focus属性
- 不能让.focus在动态创建的输入元素上工作
- 基于子元素输入控制父元素:focus