2013-05-05 34 views
2

下工作正常,为什么我不能使用Dart中的实例化参数选择内容?

<!DOCTYPE html> 
<html> 
    <body> 
    <element name="x-editable" constructor="EditableComponent" extends="div"> 
     <template> 
     <div style="display: {{editing ? 'block' : 'none'}}"> 
      <content select=".editing"></content> 
     </div> 
     <div style="display: {{editing ? 'none' : 'block'}}"> 
      <content select=".normal"></content> 
     </div> 
     <script type="application/dart" src="xeditable.dart"></script> 
     <script src="packages/browser/dart.js"></script> 
     </template> 
    </element> 
    </body> 
</html> 

它抓住所有的孩子中x-editable.editing.normal,并显示他们根据布尔editing是否是真还是假。

但是,以下不能正常工作,

<!DOCTYPE html> 
<html> 
    <body> 
    <element name="x-editable" constructor="EditableComponent" extends="div"> 
     <template> 
     <template instantiate="if editing"> 
      <content select=".editing"></content> 
     </template> 
     <template instantiate="if !editing"> 
      <content select=".normal"></content> 
     </template> 
     <script type="application/dart" src="xeditable.dart"></script> 
     <script src="packages/browser/dart.js"></script> 
     </template> 
    </element> 
    </body> 
</html> 

它没有抢到任何.editing.normal孩子。显然,我做错了什么,但是什么?

回答

1

不幸的是,<content>在嵌套的模板标签中不起作用。这很烦人,但有解决方法。你的解决方案设置div的显示似乎适用于你的情况。在其他情况下,将组件分成多个部分可能更有意义。

+0

你能展示一个将组件分成几部分的例子吗? – 2013-05-07 07:10:41

相关问题