DART POLYMER：如何通过另一个自定义元素更新属性？答案

【问题标题】：DART POLYMER: How I can update a property from a custom element by another?DART POLYMER：如何通过另一个自定义元素更新属性？
【发布时间】：2014-07-24 17:44:49
【问题描述】：

我想用另一个自定义元素 (localized_element) 更新自定义元素 (signin_element) 中的属性 labels。但是属性 labels 在操作过程中已经将类型从 Map 更改为 String。

解释：

1/ 应用程序刚启动后，自定义元素（signin-element）使用 Map 更新属性 labels（参见文件 signin.dart）。

2/ 自定义元素 localized-element 初始化后，属性 labels 会使用来自外部 json 文件的新 Map 进行更新。方法更新无法将新 Map 分配给属性 labels，因为现在是 String。

铬返回警告：

signin-element 上的属性在 Polymer 之前是数据绑定的升级元素。这可能会导致不正确的绑定类型。

localized-element 的属性在 Polymer 之前是数据绑定的升级元素。这可能会导致不正确的绑定类型。

最后返回错误：

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

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());
      });
  }

}

【问题讨论】：

标签： dart dart-polymer

【解决方案1】：

我认为你需要改变

@published Map labels;

在localized.dart 中

@PublishedProperty(reflect: true) Map labels;

与locale相同

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

【讨论】：

您好 Günter，再次感谢您的帮助 :)。我认为您谈论的是 PublishedProperty 而不是 PublishedAttribute 对吗？如果是，问题总是一样的。我无法使用新地图更新标签，因为类型是字符串。
你能发布一个允许在 GitHub 上重现问题的工作示例吗？感谢您的提示，我更新了我的答案。
瞧：drive.google.com/file/d/0B7kQatBvjEOzMTVFN1ZZeEdab3c/… 要保存完整的 zip，您可以使用 File -> download
我创建了一个包含多个 cmets github.com/olituks/dart-polymer-sample/pull/1 的拉取请求，主要原因是缺少导入。
我认为需要专门为“飞镖魔术师”创建一个新徽章。这是工作！我为有同样问题的其他人发布了解决方案。非常感谢:)

【解决方案2】：

Günter 找到了解决方案，如果您遇到同样的问题，我会推送代码更改。

首先，更新聚合物依赖到dev：

polymer: '>=0.12.0-dev <0.13.0'

其次，从localized.dart替换@published

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

在文件signin.dart中

@PublishedProperty(reflect: true)

【讨论】：