1

假设我已经构建了某种 Aurelia 组件。对于此示例，假设我构建了一个名为 ui-money 的假设组件。

假设 ui-money 组件包含一个文本输入元素，以及显示汇率的输入旁边的另一个元素（例如 span）。本质上，类似于：

<template>
   <input value.bind="amountStr" ... >
   <span>${exchange_rate}</span>
</template>

然后我构建了一个包含 <ui-money> 元素的 Aurelia 视图（页面）。

我的问题是这样的：假设我想把重点放在“ui-money”元素上。

实际上，我不想知道 ui-money 元素的内部构成（白盒知识），也不应该想要。但显然我需要将焦点转到 ui-money 元素内的 INPUT 元素。

所以，对我来说，似乎我需要让 ui-money 元素执行设置焦点的行为。

现在最明显的第一个选项是为 ui-money 元素提供一个引用，<ui-money ref="purchasePriceUx">并让 ui-money 视图模型公开某种takeFocus()方法。然后我们可以调用 purchasePriceUx.takeFocus().

但我很想知道是否有更好的方法来实现这一点，同时仍保持相同水平的解耦。

4

1 回答 1

2

您可以使用框架标准配置附带的可绑定属性和焦点属性：https ://gist.run/?id=7587f1453cb2632fa09b6fe542d9717c

重要的东西在这里：

应用程序.html

<template>
  <require from="./some-element"></require>

  <label for="hasFocus">Has Focus:</label> 
  <input id="hasFocus" type="checkbox" checked.bind="focus" />

  <div>
    Custom Element:
    <some-element has-focus.bind="focus" text.bind="text"></some-element>
  </div>
  <div>
    Regular text box: 
    <input type="text" value.bind="text" />
  </div>
</template>

一些元素.html

<template>
  <input ref="textbox" type="text" value.bind="text" focus.bind="hasFocus" />
</template>

一些元素.js

import {bindable, bindingMode} from 'aurelia-framework';

export class SomeElement {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) text;

  // the bound property cannot be named focus as it interferes with
  // the focus custom attribute
  @bindable({ defaultBindingMode: bindingMode.twoWay })  hasFocus;
}
于 2018-06-06T21:05:49.770 回答