CODEWITHSUNDEEP
dartdart-polymer
olituks
olituks

Reputation: 487

DART POLYMER: How I can update a property from a custom element by another?

I would like to update a property labels in a custom element (signin_element) by another custom element (localized_element). But the property labels have changed type from Map to String during the operation.

Explanation:

1/ Just after the application start, the custom element (signin-element) update the property labels with a Map (see the file signin.dart).

2/ After the custom element localized-element is initialized, the property labels is updated with a new Map from an external json file. The method update can't assign a new Map to the property labels, because is now a String.

Chromium return warnings:

Attributes on signin-element were data bound prior to Polymer upgrading the element. This may result in incorrect binding types.

Attributes on localized-element were data bound prior to Polymer upgrading the element. This may result in incorrect binding types.

And finally return an error:

Class 'String' has no instance method '[]='.

enter image description here

Signin.html:

<core-animated-pages selectedindex="0" notap id="core_animated_pages">
    <section id="section1" layout horizontal active center-justified center>
      <core-card id="core_card" layout vertical>
        <paper-input label="Your email addres" floatinglabel id="email_input"></paper-input>
        <paper-input label="Your password" floatinglabel id="password_input"></paper-input>
        <div id="div" layout horizontal end-justified>
          <paper-fab icon="check" id="paper_fab"></paper-fab>
        </div>
        <h2>{{labels['hello']}}</h2>
      </core-card>
    </section>
  </core_animated_pages>
  
  <localized-element id="l10n" locale={{locale}} labels={{labels}}></localized-element>

signin.dart

@CustomTag('signin-element')
class Signin extends PolymerElement {
  
  @published String locale = 'en';
  
  @observable Map labels = toObservable({
    'hello': 'Hello 1'
  });
  
  Signin.created() : super.created();
}

localized.dart

@CustomTag('localized-element')
class Localized extends PolymerElement {
  
  @published String locale = 'en';
  @published Map labels;
  
  Localized.created() : super.created();
  
  ready() {
    super.ready();
    _loadTranslations();
  }
  
  update() {
    if (!_l10n.containsKey(locale)) return;
    
    var l10n = _l10n[locale];

    labels['hello'] = l10n['hello'];
  }
  
  List locales = ['en', 'fr'];
  _loadTranslations() {
    locales.forEach((l10n)=> _loadLocale(l10n));
  }

  Map _l10n = {};
  _loadLocale(_l) {
    HttpRequest.getString('i18n/translation_${_l}.json')
      .then((res) {
        _l10n[_l] = JSON.decode(res);
        update();
      })
      .catchError((Error error) {
        print(error.toString());
      });
  }

}

Upvotes: 2

Views: 433

Answers (2)

olituks
olituks

Reputation: 487

Günter found the solution and I push the code change in case of you encounter the same issue.

First, update polymer dependencies to dev: 

polymer: '>=0.12.0-dev <0.13.0'

Second, replace @published from localized.dart

@PublishedProperty(reflect: true) String locale = 'en';
@PublishedProperty(reflect: true) Map labels;

and in the file signin.dart

@PublishedProperty(reflect: true)

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657058

I think you need to change

@published Map labels;

in localized.dart to

@PublishedProperty(reflect: true) Map labels;

the same with locale

see Google Groups - Dart Web Development - PSA: Polymer 0.11.0 @published properties no longer reflect to attributes by default

Upvotes: 3

Related Questions