飞镖Web_ui中是否有模板创建事件？

Question

有没有什么像实例化模板的通知机制？

假设以下简单的模板：

<template iterate="name in names"> 
    <div>{{name}}</div> 
</template> 

当一个名称很长，有可能这个名字div的容器溢出。所以我想要做的是在名称div被添加到DOM时获得一个事件，以便我可以查看产生的宽度。然后我会缩短这个名字，直到它很合适。

Answer 1

注：我假设你不能用CSS实现你想要的。所以这里是一个代码解决方案。

我不知道有任何事件或方法挂钩到创建过程。

不过，我已经做了一些类似这样的成功：

import 'dart:async'; 

inserted() { 
    Timer.run(() { 
    // Do your calculations here... 
    }); 
} 

如果以后再设置name变量，那么你可以或者使其可观察到的和值变化后设置定时器：

observe(() => name), (_) { 
    Timer.run(() { 
    // Recalculate... 
    }); 
}); 

并记住标记它@observable并将听众设置为created()。

Answer 2

你真的应该处理这样的事情在CSS：

.name { 
    width: 50px; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 

，给你的div一类的name。

这会自动将文本缩小到容器宽度并添加省略号以指示文本已被截断。