如何將數據綁定到CSS屬性而不使用Dart web-ui中元素的樣式屬性？

如果我試圖將數據綁定到<style>標記中的Web組件的CSS樣式表，綁定不起作用。（該塊作品中所有的靜態CSS）如何將數據綁定到CSS屬性而不使用Dart web-ui中元素的樣式屬性？

<html> 
    <body> 
    <element name='foo' constructor='FooElement' extends='div'> 
     <style> 
     div { 
      display: {{isVisible ? 'block' : 'none'}}; 
     } 
     </style> 

     <template> 
     <div>Foobar</div> 
     </template> 

     <script type="application/dart" src="xfooelement.dart"></script> 
    </element> 
    </body> 
</html>

但是，如果我申請的風格標籤的樣式屬性，它按預期工作。

<html> 
    <body> 
    <element name='foo' constructor='FooElement' extends='div'> 

     <template> 
     <div style="display: {{isVisible ? 'block' : 'none'}}">Foobar</div> 
     </template> 

     <script type="application/dart" src="xfooelement.dart"></script> 
    </element> 
    </body> 
</html>

這有明顯的缺點。

有沒有辦法使用樣式表文件或塊中的CSS屬性的數據綁定？

來源

2013-06-23 Poindexter

我建議在一個稍微不同的方式思考這個問題：嘗試將使用飛鏢語法

<html> 
    <body> 
    <element name='foo' constructor='FooElement' extends='div'> 
     <style> 
     div { 
      display: block; 
     } 
     div.hide { 
      display: none; 
     } 
     </style> 

     <template> 
     <div class="{{isVisible ? '' : 'hide'}}">Foobar</div> 
     </template> 

     <script type="application/dart" src="xfooelement.dart"></script> 
    </element> 
    </body> 
</html>

來源

2013-07-04 16:04:41

由於CSS類，不知道爲什麼我沒有看到它。 – Poindexter

如何將數據綁定到CSS屬性而不使用Dart web-ui中元素的樣式屬性？

回答

相關問題