The easiest way for a polymer element to declare a bindable property using a getter / setter?

Using an attribute attributeswith a polymer element or publish, it’s very easy to create an attribute whose underlying storage is automatically managed. However, there are often cases where the value of a property is not just stored and retrieved. For example, the value of a property may depend on a different state of the element. Another example: a property that can be bound, but read-only.

In such cases, it is nice to have the property of defining a property using a getter / setter pair. However, it is unclear how to declare the resulting property as binding. If the property name is included in attributesor publish, then getter / setter will not be used. If a property name is not declared, it does not appear to be related. And the default property behavior that is obtained from attributes/ publishis supported only by the onChanged handler; There is no way to reject an attempt to set a property (for example, in the setter), and there seems to be no way to run getter when the value is received.

I assume that any solution here requires putting aside the declarative syntax of the Polymer and building things from scratch. I took a picture: http://jsbin.com/qejaf/2/edit . This works, but I was wondering if there is an easier way to do this. For example, is it possible to define a getter / setter (or just a getter) and set it through a block publish?

(Also, there is a point in this example where I would like to be able to refer to a named element constructor, but it does not appear at the time ready.)

+4
source share
2 answers

A few points:

  • , . , , , . , , .

  • , , ( ) Object.observe , (, observe.js polyfill, ; - [. offsetWidth recalc]).

  • bindable . , . ( , ). , . jsbin count , , .

http://jsbin.com/qiboq/4/edit

+5

, getter publish poly pls,

<polymer-element name="blog-element"  attributes="owner ownnerfullname">
<template >
  <div><span>{{owner}}</span></div>
      <div><span>{{ownnerfullname}}</span></div>
      </template>
 <script>
    Polymer('blog-element', {
       publish: {
        owner: 'I am foo!',
        get ownnerfullname(){return this.owner + "changes";}
      },


    });
  </script>
</polymer-element>
+2

Source: https://habr.com/ru/post/1542251/


All Articles