聚合物Dart，全局变量和数据绑定（可观察） [英] Polymer Dart, global variables and data bindings (observable)

问题描述

我阅读了Polymer API开发人员指南，但不幸的是它只有JavaScript开发人员的示例。一些例子，我试图移植到Dart，但在这种情况下，我失败。请访问 https://www.polymer-project.org /0.5/docs/polymer/polymer.html#global （部分支持全局变量）。以下是文档中的剪辑：

I read Polymer API developer guide, but unfortunately it has examples only for JavaScript developers. Some examples I try to port into Dart, but in this case I get fail. Please, go to https://www.polymer-project.org/0.5/docs/polymer/polymer.html#global (Section Supporting global variables). Here is a clip from the documentation:

elements.html

<polymer-element name="app-globals">
  <script>
    (function() {
      var values = {};

      Polymer({
       ready: function() {
         this.values = values;
         for (var i = 0; i < this.attributes.length; ++i) {
           var attr = this.attributes[i];
           values[attr.nodeName] = attr.value;
         }
       }
      });
    })();
  </script>
</polymer-element>

<polymer-element name="my-component">
  <template>
    <app-globals id="globals"></app-globals>
    <div id="firstname">{{$.globals.values.firstName}}</div>
    <div id="lastname">{{$.globals.values.lastName}}</div>
  </template>
  <script>
    Polymer({
      ready: function() {
        console.log('Last name: ' + this.$.globals.values.lastName);
      }
    });
  </script>
</polymer-element>

index.html

<app-globals id="globals" firstname="Addy" lastname="Osmani"></app-globals>

问题：

• 如何在Dart中实现此代码？


• 阅读关于Dart Polymer使用的不同Q& A的代码我遇到了 @observable 注释， toObserve（）函数和类CustomElement扩展PolymerElement与Observable {..} 。我知道他们在某种程度上与数据绑定有关，但我不知道到底是怎么回事。

• How to implement this code in Dart?
• Reading the code of different Q&A concerning Dart Polymer usage I come across with @observable annotation, toObserve() function and class CustomElement extends PolymerElement with Observable {..}. I know that they somehow related with data bindings, but I have no idea exactly how.

推荐答案

app_gobals.html

<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="app-globals">
  <template>
    <style>
      :host {
        display: none;
      }
    </style>
  </template>
  <script type="application/dart" src="app_globals.dart"></script>
</polymer-element>

app_gobals.dart

import 'package:polymer/polymer.dart';
import 'dart:async' show Timer;

@CustomTag('app-globals')
class AppGlobals extends PolymerElement {
  static final ObservableMap _staticValues = toObservable({});

  Map get values => _staticValues;

  AppGlobals.created() : super.created();

  ready() {
    attributes.keys.forEach((k) {
      values[k] = attributes[k];
    });

    // just to demonstrate that value changes are reflected
    // in the view
    new Timer.periodic(new Duration(seconds: 2),
        (_) => values['periodic'] = new DateTime.now());
  }
}

app_element.html （您的my-component）

app_element.html (your my-component)

<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="app_globals.html">
<polymer-element name="app-element">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <app-globals id="globals"></app-globals>
    <div>{{$["globals"].values["firstname"]}}</div>
    <div>{{$["globals"].values["lastname"]}}</div>
    <div>{{$["globals"].values["periodic"]}}</div>
  </template>
  <script type="application/dart" src="app_element.dart"></script>
</polymer-element>

app_element.dart

import'package：polymer / polymer.dart';

import 'package:polymer/polymer.dart';

@CustomTag('app-element')
class AppElement extends PolymerElement {
  AppElement.created() : super.created();

  ready() {
    print('Last name: ${$["globals"].values["lastName"]}');
  }
}

@observable 表示当值更改时应通知Polymer，以便它可以更新视图。
如果你有一个集合，这是不够的，因为Polymer只有在字段改变时被通知（另一个集合或 null 被赋值）。 toObservable（list | map）确保当聚合中的元素更改（删除/添加/替换）时，Polymer获得通知。
PolymerElement 包括 Observable ，因此在类级别上没有什么特别的。当您扩展DOM元素时，这看起来有点不同，请参阅 http://stackoverflow.com/a/20383102/217408 。

@observable indicates that Polymer should be notified when the value changes so it can update the view. If you have a collection this is not enough because Polymer only gets notified when the field changes (another collection or null is assigned). toObservable(list|map) ensures that Polymer gets notified when elements in the collection are changed (removed/added/replaced). PolymerElement includes Observable there fore there is nothing special to do on class level. When you extend a DOM element this looks a bit different see http://stackoverflow.com/a/20383102/217408.

更新

这是很多问题。我使用 static final ObservableMap _staticValues = toObservable（{}）; 来确保所有值都存储在一个地方，无论多少< app-globals> ; 应用程序包含的元素。静态被存储在类中而不在实例中，因此，无论有多少实例存在。 @ComputedProperty（expression）var someField; watches 表达式用于值更改，并通知Polymer将绑定更新为 someField 。 @observable 是较简单的版本，但仅适用于字段。 @published 就像 @observable ，但是还允许从元素外部绑定到字段。 @PublishedProperty（）与 @published 相同，但此注释形式允许传递参数。 @PublishedProperty（reflect：true）就像 @published ，但是更新实际的DOM属性，可用于不仅用于其他聚合物元素结合，而且用于CSS或其他不知道如何结合到聚合物字段的框架。

Update
This are a lot of questions. I use static final ObservableMap _staticValues = toObservable({}); to ensure all values are stored in one place no matter how many <app-globals> elements your application contains. Statics are stored in the class not in the instance therefore it doesn't matter how many instances exist. @ComputedProperty(expression) var someField; watches expression for value changes and notifies Polymer to update bindings to someField. @observable is the simpler version but works only for fields. @published is like @observable but in addition allows bindings to the field from outside the element. @PublishedProperty() is the same as @published but this annotation form allows to pass arguments. @PublishedProperty(reflect: true) is like @published but in addition updates the actual DOM attribute to make the bound value available not only for other Polymer elements to bind to but also for CSS or other Frameworks which have no knowledge how to bind to Polymer fields.

这篇关于聚合物Dart，全局变量和数据绑定（可观察）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！