Каков наилучший «разъединенный» способ сосредоточить внимание на компоненте Aurelia? - PullRequest
Новая
       26

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

0 голосов
/ 06 июня 2018

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

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

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

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

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

На практике я не хочу знать внутреннюю структуруэлемент пользовательского интерфейса (знание белого ящика), и я не должен этого хотеть.Но ясно, что мне нужно сосредоточиться, чтобы перейти к элементу INPUT ВНУТРИ элемента ui-money.

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

Теперь наиболее очевидным первым вариантом было бы предоставить ссылку на элемент ui-money как таковой <ui-money ref="purchasePriceUx"> и сделать так, чтобы модель представления ui-money раскрыла какой-то метод takeFocus().Затем мы могли бы вызвать purchasePriceUx.takeFocus().

Но мне интересно знать, есть ли лучший способ добиться этого, сохраняя при этом тот же уровень развязки.

1 Ответ

0 голосов
/ 07 июня 2018

Вы можете использовать привязываемые свойства и атрибут 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>

some-element.html 

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

some-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;
}
...