在DOM初始化期间在Dart中调整文字大小

Question

我试图根据Dart内容的高度在Dart中动态调整大小的文本区域。

我有在聚合物元件限定在达特像这样一个textarea元素：

<polymer-element name="page-content"> 
    <template> 
     {{title}} 
     <ul> 
     <template repeat="{{element in elist | enumerate}}"> 
      <li value={{element.index}}><textarea class="{{element.value.type}}" resize="none" on-keypress="{{resize}}" on-change="{{updateDatabase}}">{{element.value.content}}</textarea><div on-click="{{deleteElement}}">X</div></li> 
     </template> 
     </ul> 
    </template> 
</polymer-element> 

当任何文本被输入到textarea，所述resize方法被调用并正确调整大小textarea的至适当调整其高度。

我不知道如何在元素加载到DOM时调用resize方法。我曾尝试将on-load="{{resize}}"添加到textarea，甚至查询所有textareas并调整它们的大小。似乎没有任何工作。我的坦言告诉我应该有一个简单的方法来做到这一点。

如果有帮助，在我的镖方法调整大小看起来是这样的：

void resize(Event event, var detail, var target) { 
    Element element = event.target; 
    print(element.scrollHeight); 

    element.style.height = "1px"; 
    element.style.height = "${element.scrollHeight}px"; 
    } 

Answer 1

我制定的代码与Günter Zöchbauer建议的代码非常相似。它查询阴影DOM（我不认为要这样做）来一次获取所有文本区域（而不是一个）并相应地更新它们的高度。

该方法可能在attached()或在我的情况下，在任何地方从数据库中动态获取内容之后。

void updatePageSizes() { 
    var items = shadowRoot.querySelectorAll("textarea"); 
    var j = items.iterator; 
    while (j.moveNext()) { 
     j.current.style.height = "${element.scrollHeight}px"; 
     j.current.style.backgroundColor = "blue"; 
    } 
    } 

而且，我想通了，据我所知，这是不可能的从枚举列表中添加聚合物元素的每个元素调用一个函数在飞镖。我想这只是Dart的限制。

Answer 2

这是一个有趣的问题。
我认为最好的办法是包装在一些autosize-textarea的textarea有加

<polymer-element name="autosize-textarea"> 
    <template> 
    <textarea id="inner" class="{{element.value.type}}" resize="none" 
     on-keypress="{{resize}}"> 
     {{element.value.content}}</textarea> 
    </template> 
</polymer-element> 

import 'dart:html'; 
import 'package:polymer/polymer.dart'; 

@CustomTag('autosize-textarea') 
class AutosizeTextarea extends PolymerElement { 

    AutosizeTextarea.created() : super.created(); 

    @published 
    Element element; 

    void attached() { 
    super.attached(); 
    resize(null, null, null); 
    } 

    void resize(Event event, var detail, var target) { 
    Element textarea $['inner']; 
    print(textarea.scrollHeight); 

    textarea.style.height = "1px"; 
    textarea.style.height = "${textarea.scrollHeight}px"; 
    } 
} 

和使用它像

<link rel="import" href="autosize_textarea.html"> 
<polymer-element name="page-content"> 
    <template> 
    {{title}} 
    <ul> 
     <template repeat="{{element in elist | enumerate}}"> 
     <li value={{element.index}}> 
      <autosize-textarea on-change="{{updateDatabase}}" element="{{element}}></autosize-textarea> 
      <div on-click="{{deleteElement}}">X</div> 
     </li> 
     </template> 
    </ul> 
    </template> 
</polymer-element> 

我不知道我是否正确理解你的代码，因为你命名了创建的项目fr om template repeatelement以及您从event.target获得的元素。我不确定他们是否/如何相关。 未经测试，但我认为它应该工作。