How to insert elements in DART Polymer template based on object property condition?

Question

I think my code is theoretically correct, but I can't make it work.

There's a ton of examples of conditional templates based on a variable state, but I can't find any based on a object property on which I'm iterating on.

Basically I have a list of elements non editable, when I click on "Aggiungi" button inside one of them I want a new editable element added to the list. I tried in 2 ways but no result. Here's the code:

service.dart

class InvioMailDTO {
  @observable String identifier;
  @observable String inode;
  @observable String email;
  @observable bool isEditable = false;

  InvioMailDTO() {}

  InvioMailDTO.created(String email, bool isEditable){ this.email = email; this.isEditable = isEditable; }

  factory InvioMailDTO.fromJson(json) => (json==null)? null : new InvioMailDTO()
    ..email = json["email"]
    ..identifier = json["identifier"]
    ..inode = json["inode"]
    ..isEditable = false;

  Map toJson() => {
      "email" : email,
      "identifier": identifier,
      "inode": inode,
      "isEditable": false
  };
}

component.dart

@CustomTag('main-component')
class MainComponent extends PolymerElement {
  MyService _myService;
  @observable String selMailingList;
  @observable List<InvioMailDTO> inviiMailDTOList = new ObservableList<InvioMailDTO>();

  MainComponent.created() : super.created() {
      _myService = new MyService();  
  }

  //code that populate the this.inviiMailDTOList, 
  void selMailingListChanged()
  {
    _myService.initCampagna(selMailingList).then((List<InvioMailDTO> inviiMailDTOList) {
      this.inviiMailDTOList = new ObservableList.from(inviiMailDTOList);
    });
  }

  void aggiungiClicked(Event evt, var detail, Element el)
  {
    this.inviiMailDTOList.add(new InvioMailDTO.created("", true));
  }

}

component.html

<core-menu>
  <!-- 1th way -->
  <template repeat="{{invioMailDTO in inviiMailDTOList}}" if="{{invioMailDTO.isEditable == false}}">
      <paper-item icon="mail" label="{{invioMailDTO.email}}">
          <paper-button affirmative data-arg="{{invioMailDTO.email}}" on-click="{{eliminaClicked}}" >Elimina</paper-button>
          <paper-button affirmative on-click="{{aggiungiClicked}}">Aggiungi</paper-button>
      </paper-item>
  </template>
  <template repeat="{{invioMailDTO in inviiMailDTOList}}" if="{{invioMailDTO.isEditable == true}}">
      <input type="text" value="AAAAA" />
  </template>

  <!-- 2th way -->
  <template repeat="{{invioMailDTO in inviiMailDTOList}}">
      if({{invioMailDTO.isEditable == true}})
      {
        <input type="text" value="AAAAA" />
      }
      else
      {
          <paper-item icon="mail" label="{{invioMailDTO.email}}">
              <paper-button affirmative data-arg="{{invioMailDTO.email}}" on-click="{{eliminaClicked}}" >Elimina</paper-button>
              <paper-button affirmative on-click="{{aggiungiClicked}}">Aggiungi</paper-button>
          </paper-item>
      }
  </template>
</core-menu>

Answer 1

Here's the fixed code

<template repeat="{{invioMailDTO in inviiMailDTOList}}">
  <template if="{{invioMailDTO.isEditable}}">
    <input type="text" value="AAAAA" />
  </template>
  <template if="{{!invioMailDTO.isEditable}}">
      <paper-item icon="mail" label="{{invioMailDTO.email}}">
          <paper-button affirmative data-arg="{{invioMailDTO.email}}" on-click="{{eliminaClicked}}" >Elimina</paper-button>
          <paper-button affirmative on-click="{{aggiungiClicked}}">Aggiungi</paper-button>
      </paper-item>
  </template>
</template>