简体   繁体   中英

dart-polymer update polymer dom elements

I am using this Templates to create a list of notice entries which works fine the first time.

NoticeList nle = querySelector('#noticeList');
nle.notices = notices;

But the second time I call this code gets executed the site doesn't change at all. Am i missing something?

Thank you

<polymer-element name="notice-list">
   <template>
     <ul id = "noticeEntrys">
        <template repeat="{{notice in notices}}">
          <li>
            <notice-element notice={{notice}}></notice-element>
          </li>
        </template>
      </ul>
    </template> 
  <script type="application/dart" src="notice_list.dart"></script>
</polymer-element>

 <polymer-element name="notice-element">
  <template>
    <div class="notice">
      <textarea rows="8" readonly>{{notice.getText()}}</textarea>
      <div class="controlls">
        <button type="button" name="delete" on-click={{delete}}>Delete</button>
        <button type="button" name="change" on-click={{change}}>Change</button>
      </div>
    </div>
  </template> 
  <script type="application/dart" src="notice_element.dart"></script>
</polymer-element>
@CustomTag('notice-list')
class NoticeList extends PolymerElement {
  NoticeList.created() : super.created() {
  }

  @published List<Notice> notices;
}

@CustomTag('notice-element')
class NoticeElement extends PolymerElement {
  NoticeElement.created() : super.created() {
  }

  @published Notice notice;

  void delete(Event e, var detail, Node target) {
    Datamanager.removeNotice(notice);
    Controller.updateListe();
  }

  void change(Event e, var detail, Node target) {
    Controller.updateActiveElement(notice);
  }

  void setNotice(Notice n)  {
    notice = n;
  }  
}

Edit: I update the code the same as i set the list in the first time I get the new data via a webservice and the new data is correct

static void noticesLoadedPolymerList(List<Notice> notices) {
    NoticeList nle = querySelector('#noticeList');
    nle.setNotices(notices);
  }

Edit2: I added a simple integer to display the listsize @observable int listSize; The value changes if i assign the new list but the displayed content doesn't.

If you set notices in NoticeList to a new List instance it should recognize the change. If you assign notices in your first attempt and only modify in you second attempt you have to make your notices list observable var notices = toObservable([new Notice('notice1'), new Notice('notice2'), ...]) .

You haven't provided code of your Notice class. It may be necessary to make your Notice class observable like:

class Notice extends Object with Observable { @observable String text; }

This way Polymer recognizes if only a property of a notice instance changes (without changing (add/remove) the notices list.

Finally hat time to solve the problem.

My problem was that i would start polymer like this

initPolymer();

when i should have started it like this

 initPolymer().run(() {
   //initialization and other stuff
 }

More about this you can find here https://code.google.com/p/dart/issues/detail?id=15379

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM