飛鏢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。

這會自動將文本縮小到容器寬度並添加省略號以指示文本已被截斷。