Dart 聚合物条件模板

Question

我创建了一个示例 ClickCounter Dart 应用程序，并尝试修改它以使用如下条件模板:

<polymer-element name="click-counter">
  <template if="{{count < 10}}">
    <style>
      div {
        font-size: 24pt;
        text-align: center;
        margin-top: 140px;
      }
      button {
        font-size: 24pt;
        margin-bottom: 20px;
      }
    </style>
    <div>
      <button on-click="{{increment}}">Click me</button><br>
      <span>(click count: {{count}})</span>
    </div>
  </template>
  <template if="{{ count >= 10 }}">
  Too much
  </template>
  <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

但即使计数属性大于或等于 10，也始终显示第一个模板。我使用的 Dart Editor 版本 1.1.0.dev_04_00 (DEV)，Dart SDK 版本 1.1.0-dev.4.0

谢谢

Answer 1

好的，我发现了问题所在:使用条件模板时需要使用主模板来封装条件模板:

<polymer-element name="click-counter">
<template>
  <template if="{{count < 10}}">
    ...
  </template>
  <template if="{{ count >= 10 }}">
    ...
  </template>
</template>
<script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

希望对你有帮助