Question

以下工作正常，

<!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的所有孩子，并根据bool 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个孩子。显然，我做错了什么，但是什么？

Answer 1

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

为什么我不能在Dart中使用实例化参数选择内容？

1 个答案: