Question

我认为我的代码在理论上是正确的，但我无法使其正常工作。

有很多基于变量状态的条件模板的例子，但我找不到任何基于我正在迭代的对象属性。

基本上我有一个不可编辑的元素列表，当我点击其中一个内的“Aggiungi”按钮时，我想要一个新的可编辑元素添加到列表中。我试过两种方式，但没有结果。这是代码：

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

这里是固定代码

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

如何根据对象属性条件在DART Polymer模板中插入元素？

1 个答案: