Question

我们说我已经建立了某种Aurelia组件。对于这个例子，我们说我已经构建了一个名为ui-money的假设组件。

让我们说ui-money组件包括文本输入元素，以及显示汇率的输入旁边的另一个元素（例如span）。实质上，像：

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

然后我构建了一个Aurelia视图（页面），其中包含＆lt; ui-money＆gt;元件。

我的问题是：让我们说我想把重点放在＆＃34; ui-money＆＃34;元件。

实际上，我不想知道ui-money元素的内部构成（白盒知识），我也不想要它。但显然我需要把重点转移到ui-money元素中的INPUT元素。

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

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

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

Answer 1

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

重要的是：

<强> app.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>

<强>一些-element.html

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

<强>一些-element.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;
}

什么是最好的＆＃34;解耦＆＃34;重点关注Aurelia组件的方法？

1 个答案: