All geek questions in one place

Observer-Shared Polymer: Getting Original Property

I have a number of properties that I want to observe with the same common observer. Suppose I want to track the history of changes. Unfortunately, the standard polymer observer callback, in accordance with the documentation , has an unsophisticated prototype:

myObserver: function(oldValue, newValue) {}

Since I want to track changes, I need to know how the property has changed. myObserver engineering the arguments of myObserver , I unexpectedly discovered that there is a third argument of type Arguments[3] passed to the function. So, the code ^ W woodoo-magic below would do the trick:

 myObserver: function() { if (arguments.length > 2) { // observer called by polymer var args = arguments[2]; var idx = args[1].length - 1; // sic! index of changed is stored in index var prop = args[2][idx * 2 + 1][0]; var val = args[0][idx]; console.log("Property [" + prop + "] got new value: " + val); } ... }

Being sane and eager to stay sane, I want to know if I missed a more amiable way to get the name of the changed attribute from the observer.

@ebidel and @robdodson, could you shed some light on this? Is arguments[2] supported in the latest versions? Is there a better way to respond to change?

Thanks in advance.

+6
source share
2 answers

I think you are looking for another mechanism. If you really agree to adopt another mechanism to implement the necessary functions, this may not interfere with checking the MutationObserver. I managed to reproduce the demo in this answer and easily write my chrome console to the elements observed by this MutationObserver.

Hope this helps!

0
source

So, if I understand correctly, the goal is to use one observer for several property changes, and inside the observer you should be able to determine the name of the changed property.

I experimented a bit and found out that you can achieve this with the help of deep observers outside.

 <!doctype html> <html> <head> <meta name="description" content="http://stackoverflow.com/questions/28265025"> <meta charset="utf-8"> <base href="http://polygit.org/components/"> <script href="webcomponentsjs/webcomponents-lite.min.js"></script> <link href="polymer/polymer.html" rel="import"> </head> <body> <dom-module id="x-el"> <template> <p>path: {{path}}</p> <p>value: {{value}}</p> <button on-click="incrementNumber1">increment number 1</button> <button on-click="incrementNumber2">increment number 2</button> </template> <script> Polymer({ is: 'x-el', properties: { path: { type: String, notify: true }, value: { type: String, notify: true }, number1: { type: Number, value: 0, notify: true }, number2: { type: Number, value: 0, notify: true }, }, observers: [ 'onChange(number1.*)', 'onChange(number2.*)' ], incrementNumber1: function() { this.number1 += 1; }, incrementNumber2: function() { this.number2 += 1; }, onChange: function(changeRecord) { this.path = changeRecord.path; this.value = changeRecord.value; } }); </script> </dom-module> <x-el></x-el> </body> </html>

https://jsbin.com/pufexay/edit?html,output

0
source

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

More articles:


All Articles