Как я могу объединить ember-bootstrap и ember-autoizeize?

Question

Я хотел бы добавить атрибут autoresize=true к текстовой области, которая рисуется с помощью https://www.ember-bootstrap.com/ для использования ember-autoresize.

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

Я пытался манипулировать данным контролем так:

{{#bs-form formLayout="vertical" model=email as |form|}}
    {{#form.element controlType="textarea" property="textEdit" as |el|}}
        {{el.control autoresize=true}}
    {{/form.element}}
{{/bs-form}}

Но это работает только для classNames, но не для атрибутов.

Какой самый простой способ достижения того, что я пытаюсь сделать?

Answer 1

Есть два способа сделать это.

Оба примера предполагают ember-bootstrap а также ember-autoresize установлены.

1. Специальный подход: настройка не требуется, но менее удобна в использовании

Используйте "Пользовательские элементы управления", описанные здесь.

Вот пример:

{{#bs-form formLayout="vertical" model=email as |form|}}
    {{#form.element controlType="textarea" property="textEdit" as |el|}}
        {{textarea autoresize=true id=el.id value=el.value class="form-control"}}
    {{/form.element}}
{{/bs-form}}

Демонстрация: https://ember-twiddle.com/4860f5d660dceadc804495d2720f69f6?openFiles=templates.application.hbs%2C

2. Надежный подход: необходима конфигурация, но удобнее в использовании

Переопределить исходный компонент textarea.

Вот путь к классической структуре проекта. Для модулей или модулей, путь будет другим.

app/components/bs-form/element/control/textarea.js

Внутри этого файла сделайте то, что делает компонент textarea с автоматическим изменением размера, но поверх компонента textarea Ember-Bootstrap:

import BootstrapTextareaComponent from 'ember-bootstrap/components/bs-form/element/control/textarea';
import AutoResizeMixin from 'ember-autoresize/mixins/autoresize';
import { computed, get } from '@ember/object';
import { isEmpty, isNone } from '@ember/utils'; 

export default BootstrapTextareaComponent.extend(AutoResizeMixin, {
  autoresize: true,
  shouldResizeHeight: true,
  significantWhitespace: true,
  autoResizeText: computed('value', 'placeholder', {
    get() {
      var placeholder = get(this, 'placeholder');
      var value = get(this, 'value');
      var fillChar = '@';

      if (isEmpty(value)) {
        return isEmpty(placeholder) ? fillChar : placeholder + fillChar;
      }

      if (isNone(value)) {
        value = '';
      }

      return value + fillChar;
    }
  })
});

Затем вы можете вызвать компонент текстовой области Bootstrap в обычном режиме:

{{#bs-form model=this formLayout="vertical" as |form|}}
  {{form.element label="Inline" placeholder="Enter description..." property="appName" controlType="textarea"}}
{{/bs-form}}

Демонстрация: https://ember-twiddle.com/693209c5fd4c2eeae765827f42dbd635?openFiles=templates.application.hbs%2C

Приведенный выше код активирует автоматическое изменение размера всех текстовых полей Ember-Bootstrap. Если вам нужен гранулярный контроль, вы также можете удалить autoresize: true из определения компонента. Это позволит вам включить автоматическое изменение размера по отдельности, передав autoresize=true в {{form.element}} вызов компонента.

Answer 2

Похоже на использование ember-bootstrap а также ember-autoresize вместе не получится, потому что даже добавление ember-autoresize mixin не изменяет размер текстовой области автоматически, хотя mixin применяется успешно, о чем свидетельствует класс, добавленный ember-autoresize,

Возможно, оба плагина, пытающиеся манипулировать текстовой областью, вызывают конфликты. Возможно, последнее несовместимо с первым в сочетании с Ember 3.11.

Кроме того, вы можете взломать решение вместе, манипулируя data-min-rows на входе, как этот пример кода jpenery.

Приведено для краткости:

// Applied globally on all textareas with the "autoExpand" class
$(document)
    .one('focus.autoExpand', 'textarea.autoExpand', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.autoExpand', 'textarea.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0, rows;
        this.rows = minRows;
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });

Bootstrap добавляет jQuery в любом случае. С таким же успехом