如何结合 ember-bootstrap 和 ember-autoresize?

Question

>我想将属性autoresize=true添加到使用 ember-bootstrap 绘制的文本区域，以便使用 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}}

但这仅适用于类名，不适用于属性。

实现我想要做的事情的最简单方法是什么？

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.稳健的方法：需要配置，但使用更方便

覆盖原始文本区域组件。

下面是经典项目结构的路径。对于 Pod 或模块统一，路径将有所不同。

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

在该文件中，执行自动调整大小文本区域组件所执行的操作，但在 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;
}
})
});

然后，您可以正常调用引导文本区域组件：

{{#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-autoresizemixin也不会自动调整文本区域的大小，尽管mixin已成功应用，证明ember-autoresize添加的类。

也许两个试图操纵文本区域的插件都会导致冲突。也许后者与前者与 Ember 3.11 结合使用不兼容。

或者，您可以通过操作输入data-min-rows来一起破解解决方案，就像这个代码笔 jquery 示例一样。

为简洁起见，引用：

// 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。不妨使用它。