Dom-repeat and VM-related operations in the JavaScript Polymer framework _ basic knowledge-js tutorial

This article mainly introduces dom-repeat and VM-related operations in the JavaScript Polymer framework. Polymer is a WebUI-related framework developed by Ggoogle, you can refer to various frameworks to bind list data to DOM. For example, Angular uses ng-repeat to bind list data. What about Polymer? In fact, this level of functionality is an extension of the Framework, and Angular ng-repeat is just a direve ve. Polymer's dom-repeat is also at this level.
In Polymer, everything is the concept of direve ve. Dom-module is used to define a module. It is also a direve ve. Dom-repeat is also, but it is not a tag, but a template ve Based on the template tag. We can use it like this:
Run

Script var Polymer = {dom: 'shadow'}; script
 
  
    
   
 
   
        
     
  
The[[Index]Item, value:[[Item] 
   
      
   
 
 
  Script Polymer ({is: 'demo-test', properties: {data: {type: Array, value: ['A', 'B', 'C ', 'D'] }}); script
 
 

The code above sets the is attribute to dom-repeat for a template element, so that the content in this template element is cyclically formed. This loop is traversed Based on the items attribute provided on the template element. Note that items must be an array. Although it may be inconvenient to use, I think this restriction is a good practice. Avoid various problems caused by using for-in traversal like Angular.
For each item of items, its index and value are put into the index and item attributes for the template to use. Therefore, the above example outputs the given index and value.
However, Polymer's data update is not based on dirty data comparison, so dynamic data update may be a little troublesome. For example, we have a button, which should be written in this way every time we click to add one.
Run

Script var Polymer = {dom: 'shadow'}; script
 
  
    
     
   Add an item  
   
 
   
        
     
  
The[[Index]Item, value:[[Item] 
   
      
   
 
 
  Script Polymer ({is: 'demo-test', properties: {data: {type: Array, value: ['A', 'B', 'C ', 'D'] }}, append: function () {// data. push (this. value); // this cannot be written. this. push ('data', this. value)}); script
 
 

As we have said before, Polymer will set the data that needs to be monitored and changed as an accessors attribute, but if the elements of the array are changed, there is actually no change to the array itself. When we assign an array to the VM, we actually copy the elements instead of dropping the array object. That is to say, this array object is not directly referenced by the VM, and operations on this array object cannot affect the VM, so the direct push to the array is only the push to the data.
Although the array's own push method cannot operate the VM, Polymer also provides some methods to directly operate the VM. For example, in the above example, this. push is provided by Polymer. Its operation template is not an object, but an access path on the VM (for example, the first parameter 'data' of push in the above example is the data access path in the VM ).
In addition to push, there are also pop, shift and other operations similar to native methods (but note that they are not element methods ). Although the operation is really not convenient, it is not so disgusting, but I am reluctant to accept it.