JavaScript in the polymer framework of Dom-repeat and VM related Operations _ basics

Various frameworks have the ability to bind a list of data to the DOM, such as angular, which is bound with ng-repeat. So what about polymer? In fact, this level of functionality belongs to the extended function of the framework, angular ng-repeat is just a directive. Polymer's dom-repeat is also something of this level.
in Polymer, everything is the concept of Directive. Dom-module is used to define a module, which is itself a directive. Dom-repeat is also, but it is not a label, but a directive based on the template tag. We can use it this way:
Run

 <script> var polymer = {dom: ' Shadow '}; </script> <base href= ' http://www. Web-tinker.com/share/"/> <link rel=" "Import" href= "polymer/polymer.html"/> <dom-module "id=" > <template> <ul> <template is= "dom-repeat" items= "[[Data]]" > <li> <strong& Gt [[index]]</strong>, value <strong>[[item]]</strong> </li> </template> </UL&G
 T </template> <script> Polymer ({is: ' Demo-test ', properties: {data: {Type:array, Valu
 E: [' A ', ' B ', ' C ', ' d ']}}; </script> </dom-module> <demo-test></demo-test> 

The code above sets the is attribute to dom-repeat for a template element, so the contents of the template element are cycled. This loop is traversed based on the items property provided on the template element. Note that items must be arrays, although it may be a bit inconvenient to use, but I think this limitation is a very good practice. Avoids the various problems that are caused by using for-in like angular.
Each item of items whose indexes and values are placed in the properties of index and item for use within the template template, the example above outputs the given index and value.
However, polymer data updates are not based on dirty data, so dynamic updates of data can be a bit cumbersome. For example, we have a button, each click to add an item should be so written
run

 <script> var polymer = {dom: ' Shadow '}; </script> <base href= ' http://www. Web-tinker.com/share/"/> <link rel=" "Import" href= "polymer/polymer.html"/> <dom-module "id=" > <template> <input placeholder= "Please enter the content" Value= "{{value::input}}"/> <button on-click= "append" > Add One </button> <ul> <template is= "dom-repeat" items= "[[Data]]" > <li> <strong>[[ 
 index]]</strong>, value <strong>[[item]]</strong> </li> </template> </ul> </template> <script> Polymer ({is: ' Demo-test ', properties: {data: {type:array, VA Lue: [' A ', ' B ', ' C ', ' d ']}}, Append:function () {//Data.push (This.value);//That's not going to work. This.push (' da
 Ta ', This.value)}}); </script> </dom-module> <demo-test></demo-test> 

As we said before, polymer will set the data that needs to monitor changes as an accessor property, but if you change the elements of the array, there is no change in the group itself. When we assign an array to a VM, we actually copy the elements over, rather than throw the array objects over. In other words, this array object is not directly a reference to the VM, the operation of this array object can not affect the VM, so the direct array to do the push is only the push of the data.
Although the array's own push method cannot operate the VM, polymer itself provides some ways to directly manipulate the VM, such as the This.push in the example above is provided by polymer. Its action template is not an object, but an access path on the VM (for example, the first parameter ' data ' in the example above is the data access path in the VM).
In addition to the push there are some similar native methods, such as pop, shift, and so on (but note that they are not element methods). Although the operation is not very convenient, but also not to the extent of nausea, anyway, I was reluctantly acceptable.