"Go" Polymer API Development Guide (ii) (translation)

Translated from: http://segmentfault.com/blog/windwhinny/1190000000596258

Public property

When you expose a property name for a polymer element, it is equivalent to setting the property as a public API. The public property will have the following characteristics:

• Supports declarative data two-way binding
• By declaring that the property will initialize the data in the same HTML attribute as the name
• The value of the property can be reflected on the corresponding attribute of the element

Note: The property name is case-sensitive, but attribute is not. The polymer will correspond to the property and the attribute one by one, so you cannot declare two attribute (for example: Name and name) that differ only in case;

There are two ways to bind a property:

• Place the property name in the polymer-element element attributes attribute
• Place the property name in the construction prototype publish

For example, here's an element, set attributes to set three public properties,, foo bar baz .

<polymer-element name="x-foo" attributes="foo bar baz"> <script> Polymer(‘x-foo‘); </script></polymer-element>

The following example uses publish :

<polymer-element name="x-foo">  <script> Polymer(‘x-foo‘, { publish: { foo: ‘I am foo!‘, bar: 5, baz: { value: false, reflect: true } } }); </script></polymer-element>

The main note is that baz different declarative methods are used to turn on the attribute reflection function.

In general, we are more likely to use attributes it because it is declarative, and developers can easily see the API exposed by all elements through element tags.

We recommend the use of declarations only in the following cases publish :

• The element exposes too many property, attributes it is a little strange to put all the property names.
• The initial value of the property needs to be set.
• You need to set the reflection between the attribute and the property

Default value of Property

By default, the value of the property attributes that is set in is null .

<polymer-element name="x-foo" attributes="foo"> <script> // x-foo 有一个名称为 foo 的 property ，默认值为 null Polymer(‘x-foo‘); </script></polymer-element>

Polymer adds foo to the element prototype and is set to null .
You can pass the default value of the explicit property on the element prototype .

<polymer-element name="x-foo" attributes="bar"> <script> Polymer(‘x-foo‘, { // x-foo 有一个名称为 bar 的 property ，默认值为 false bar: false }); </script></polymer-element>

Or you can move them all publish in:

<polymer-element name="x-foo">  <script> Polymer(‘x-foo‘, { publish: { bar: false } }); </script></polymer-element>

If the property's default value is object or array, it needs to be initialized in created so that the reference to the values in the different instances is different.

<polymer-element name="x-default" attributes="settings"> <script> Polymer(‘x-default‘, { created: function() { // create a default settings object for this instance this.settings = { textColor: ‘blue‘; }; } }); </script></polymer-element>

To configure an element by setting attribute

Attribute provides us with an easy way to configure elements directly. We can customize it by setting attribute to provide an initial value for the element.

<x-foo name="Bob"></x-foo>

If the property of an element is not a string, then polymer automatically determines its type and converts it to the appropriate format.
Unless the attribute reflex is turned on, the attribute-to-property connection is unidirectional, and the property change does not affect attribute.

Note: Do not confuse data binding and attribute configuration. Data binding is a reference, which means that values are not serialized and deserialized.

Probe Property Type

Polymer determines the type of the property based on its default value, and converts the bound attribute to this type.

For example, an element x-hint has a property named count , and the default value is 0 .

<x-hint count="7"></x-hint>

Because count the default value is 0 , Polymer converts the string to "7" a number 7 .

If a property is an object or an array, then we can use a JSON string to represent it.

<x-name fullname=‘{ "first": "Bob", "last": "Dobbs" }‘></x-name>

This is equivalent to setting the property of the element in JS fullname .

' Dobbs '};

We can publish set the default value in the or created callback. The following element uses three different methods.

<Polymer-elementName= "hint-element" attributes= " IsReady items "><script> Polymer ( ' hint-element ', {//hint that IsReady is a Boolean IsReady: false, publish: {//hint that count is a number count: 
                 
                  0}, created: 
                  function () {//hint that items are an array this.items = [];} }); </script></ POLYMER-ELEMENT>          
                   

Important: For a property of type object or array, it should always be initialized in the created callback. If you set the default value directly on the construction prototype, you will encounter a "shared state" error in a different instance.

Property reflected to Attribute

The value of the property can be reflected on the corresponding attribute. For example, if you turn on a pair of reflections on an element, name this.name="Joe" The effect is equal  this.setAttribute(‘name‘,‘Joe‘) to that the element will automatically update the DOM.

<x-foo name="Joe"></x-foo>

Property reflection is only useful in certain special scenarios, so it is closed by default, and the most common place is to use attribute to control the style of the elements.

Cond...

"Go" Polymer API Development Guide (ii) (translation)