Каков наилучший "разъединенный" способ сосредоточить внимание на компоненте Aurelia?

Question

Допустим, я создал какой-то компонент Aurelia. Для этого примера, скажем, я построил гипотетический компонент, который называется ui-money.

Предположим, что компонент ui-money содержит элемент ввода текста и другой элемент (например, span) наряду с элементом ввода, который показывает обменный курс. По сути, что-то вроде:

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

Затем я создаю представление Aurelia (страница), которое включает элемент .

У меня такой вопрос: скажем, я хочу сфокусироваться на элементе "пользовательского интерфейса".

Практически говоря, я не хочу знать внутреннюю структуру элемента пользовательского интерфейса (знание "белого ящика") и не должен этого хотеть. Но ясно, что мне нужно сосредоточиться, чтобы перейти к элементу ВВОДА внутри элемента пользовательского интерфейса.

Так что, мне кажется, мне нужно попросить элемент ui-money выполнить для меня задачу установки фокуса.

Теперь наиболее очевидным первым вариантом будет предоставление ссылки на элемент пользовательского интерфейса как таковой. <ui-money ref="purchasePriceUx"> и модель представления UI-деньги выставить какой-то 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;
}