Notice interaction in the Polymer framework of JavaScript-js tutorial

This article mainly introduces the notification interaction in the JavaScript Polymer framework. Polymer is a front-end framework developed by Google for WebUI, you can refer to Polymer to define the attributes with listening requirements in the form of accessors (the attributes without listening requirements are still defined in the form of common attributes ). The ":" syntax can also be used in the template to synchronize attributes to an event of the target element in two directions. This is the concept of Bidirectional binding in Angular, it is even more pure and close to the principle.
If the property defined in properties is not added to the template and is not used in the template, it does not need to be monitored, so it is defined as a common property. Otherwise it will be defined as the accessors. The following example explains this problem.
Run

《script》 var Polymer = { dom: 'shadow' }; 《script》
 
  
  
     [[z]] 
   《script》  Polymer({   is: 'demo-test',   properties: {    x: { value: 'x' },    y: { value: 'y', notify: true }   },   ready: function() {    console.log(Object.getOwnPropertyDescriptor(this, 'x'));    console.log(Object.getOwnPropertyDescriptor(this.__proto__, 'y'));    console.log(Object.getOwnPropertyDescriptor(this.__proto__, 'z'));   }  }); 《script》
 
 

When a property with policy set to true is changed, an "attribute name-changed" event is generated. Note that the attribute name and changed are linked by a horizontal bar, and changed is the past tense, rather than the original form of change. Polymer can use listeners to add event listening, but it cannot be directly bound to a function. Instead, it must be bound to an attribute name (I don't understand why it is designed like this ).
Run

《script》 var Polymer = { dom: 'shadow' }; 《script》
 
  
  
     [[i]] 
   《script》  Polymer({   is: 'demo-test',   properties: {    i: { value: 0, notify: true }   },   ready: function() {    setInterval(function(that) {     that.i++;     }, 100, this);   },   listeners: {    'i-changed': 'iChangeHandler'   },   iChangeHandler: function(event) {    console.log(event.detail.value);   }  }); 《script》
 
 

Events can be captured using the ":"> method in the template, and these events include the notification events generated above and the interactive events triggered by the user.
Run

《script》 var Polymer = { dom: 'shadow' }; 《script》
  
   
  
    
  
    [[text]] 
  《script》  Polymer({ is: 'demo-test' }); 《script》
 

Note that the above is style $ = "[css]" rather than the direct style = "css", because the attribute is assigned to the element, rather than the pure property value. So add "$" before the equal sign (in fact, I think this syntax looks very strange ).
These are all the data binding content in Polymer that I know. Some omissions may be added in other articles.