Dom-repeat and VM-related operations in the Polymer framework of JavaScript, polymerdom-repeat

Dom-repeat and VM-related operations in the Polymer framework of JavaScript, polymerdom-repeat

Various frameworks have the ability to bind a list of data to the DOM. For example, Angular uses ng-repeat to bind the 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> <base href = "http://www.web-tinker.com/share/"/> <link rel = "import" href = "polymer/polymer.html"/> <dom-module id = "demo-test"> <template> <ul> <template is = "dom-repeat" items = "[data]"> <li> NO. <strong> [[index] </ strong> item, the value is <strong> [[item] </strong> </li> </template> </ul> </template> <script> Polymer ({is: 'demo-test', properties: {data: {type: Array, value: ['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 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> <base href = "http://www.web-tinker.com/share/"/> <link rel = "import" href = "polymer/polymer.html"/> <dom-module id = "demo-test"> <template> <input placeholder = "Enter the content" value = "{value:: input }}"/> <button on-click = "append"> Add an item </button> <ul> <template is = "dom-repeat" items = "[data] "> <li> item <strong> [[index] </strong>, the value is <strong> [[item] </strong> </li> </template> </ul> </template> <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> </dom-module> <demo-test> </demo-test>

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.