2

以下工作正常，

<!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孩子。显然，我做错了什么，但是什么？

4

1 回答 1

1

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

于 2013-05-06T02:08:02.317 回答