Dart Polymer conditional template

2
votes

I create a sample ClickCounter Dart application and I tried to modify it to use a conditional template like this:

<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>

but even if the count attribut is higher or equals to 10, the first template is always displayed. I used the Dart Editor version 1.1.0.dev_04_00 (DEV), Dart SDK version 1.1.0-dev.4.0

Thks

2
dartdart-polymer

2 Answers

6
votes

Ok I found what was wrong: when using conditional template you need to use a master template to encapsulate conditional templates:

<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>

Hope it can help

2
votes

The code works if you wrap the two conditional templates in a <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>