1。临时方法：无需配置，但使用起来不太方便

Question

我想将属性responses=[] resp='' read=False with open('data') as f: lines = f.readlines() for line in lines: firstWord = line.split(' ')[0] if firstWord == 'HTTP/1.1': resp=line read=True elif firstWord=='\n' and resp: responses.append(resp) resp='' read=False elif read: resp+=line print(responses)添加到使用ember-bootstrap绘制的文本区域中，以便使用ember-autoresize。

As you can see here，此属性未绑定，因此我不能简单地将其添加到模板中。

我试图像这样操纵产生的控件：

autoresize=true

但这仅适用于className，不适用于属性。

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

Answer 1

有两种方法。

两个示例均假设已安装ember-bootstrap和ember-autoresize。

1。临时方法：无需配置，但使用起来不太方便

使用here中所述的“自定义控件”。

这是一个例子：

{{#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。可靠的方法：需要配置，但使用起来更方便

覆盖the original textarea component。

这是Classic项目结构的路径。对于Pod或模块统一，路径将不同。

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

在该文件中，执行autoresize textarea component的操作，但要在Ember-Bootstrap的textarea组件之上：

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 textarea组件：

{{#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（例如codepen jquery example）来一起破解解决方案。

为简洁起见：

// 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。最好也使用它。

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

2 个答案:

1。临时方法：无需配置，但使用起来不太方便

2。可靠的方法：需要配置，但使用起来更方便