dart-polymer update polymer dom elements

Question

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.

Can you please add the code how you create update the `notices` list? The code you provided looks fine. — Günter Zöchbauer, Jan 28 '14 at 22:42
@GünterZöchbauer i added some additional information maybe it helps as I am really confused at the moment why it isn't working — lolsharp, Jan 29 '14 at 10:27
did you try `toObservable(notices)` before assigning it to the polymer element? Still can't see where you create the list. — Günter Zöchbauer, Jan 29 '14 at 10:29
possible duplicate of [how to implement a main function in polymer apps](http://stackoverflow.com/questions/20982489/how-to-implement-a-main-function-in-polymer-apps) — Günter Zöchbauer, Feb 10 '14 at 17:15

score 0 · Answer 1 · answered Jan 29 '14 at 06:56

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.

score 0 · Accepted Answer · answered Feb 10 '14 at 16:57

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

dart-polymer update polymer dom elements

2 Answers2