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编辑器版本1.1.0.dev_04_00（DEV），Dart SDK版本1.1.0-dev.4.0

THKS

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>

希望它可以提供帮助

Answer 2

如果您将两个条件模板包装在<template>：

中，则代码可以正常工作

<polymer-element name="click-counter">
  <template>
    <template if="{{count < 10}}">
      <div>
        <button on-click="{{increment}}">Click me</button><br>
        <span>(click count: {{count}})</span>
      </div>
    </template>
    <template if="{{ count >= 10 }}">
    Too much
    </template>
  </template>
  <script type="application/dart" src="clickcounter.dart"></script>
</polymer-element>

Dart Polymer条件模板

2 个答案: