I have:
<template is="dom-repeat"
initial-count="1"
index-as="index"
items="{{uploadState}}">
<div hidden="[[getState(index)]]" class="layout vertical center-center">
and I have:
properties: {
uploadState: {
type: Array,
value: function() {
var arr = Array.apply(null, Array(1));
var newArray = arr.map(()=> {
return { value: false };
});
return newArray;
},
notify: true
},
getState: function(index) {
var uploaded = this.get(['uploadState', index]);
// use this.linksPath??
return uploaded.value;
}
And:
changeState: function(index) {
this.uploadState[index].value = true;
}
When I change this.uploadState[0].value to false the hidden="[[getState(index)]]" does not detect the change.
How would I make hidden detect the change? I read this similar issue but not sure how I would use linkPath on this.
You can't work with native arrays in Polymer with data bindings. Polymer has it's own way of mapping the array elements in memory and it won't be able to detect a change to a array of elements.
Instead, I had to use the Polymer api's to mutate the arrays..this.get and this.set. This takes some getting use to since you will need to treat array elements as paths as I did with uploadState.*.
Documentation is a little rough since since there is no api documentation for array.base()(at least that I found ....not Polymer.base()).
Solution:
See Bind to an array item
<div hidden$="{{getState(uploadState.*, index, 'value')}}">
...
uploadState: {
type: Array,
value: function() {
var arr = Array.apply(null, Array(1));
var newArray = arr.map(()=> {
return { value: false };
});
return newArray;
},
notify: true
}
},
getState: function(change, index, path) {
var uploaded = this.get(path, change.base[index]);
return uploaded;
},
changeState: function() {
this.set('uploadState.0.value', true);
}
Related
I have a function in node.js that looks like this:
exports.getAllFlights = function(getRequest) {
// this is the package from npm called "async"
async.map(clients, getFlight, function(err, results) {
getRequest(results);
});
}
The variable clients should be a JSON that looks like this:
{'"A4Q"': 'JZA8187', "'B7P"': 'DAL2098' }.
I expect that the map function will pass the individual indices of the array of the variable clients to getFlight. However, instead it passed the values of that each(ex: 'DAL2098', 'JZA8187' and so on).
Is this the expected functionality? Is there a function in async that will do what I want?
The signature of getFlight is getFlight(identifier, callback). Identifier is what is currently messed up. It returns callback(null, rtn). Null reprsents the nonexistence of an error, rtn represents the JSON that my function produces.
Yes, that's the expected result. The documentation is not very clear but all iterating functions of async.js pass the values of the iterable, not the keys. There is the eachOf series of functions that pass both key and value. For example:
async.eachOf(clients, function (value, key, callback) {
// process each client here
});
Unfortunately there is no mapOf.
If you don't mind not doing things in parallel you can use eachOfSeries:
var results = [];
async.eachOfSeries(clients, function (value, key, callback) {
// do what getFlight needs to do and append to results array
}, function(err) {
getRequest(results);
});
Another (IMHO better) workaround is to use proper arrays:
var clients = [{'A4Q': 'JZA8187'},{'B7P': 'DAL2098'}];
Then use your original logic. However, I'd prefer to use a structure like the following:
var clients = [
{key: 'A4Q', val: 'JZA8187'},
{key: 'B7P', val: 'DAL2098'}
];
First create a custom event. Attach a listener for return data. then process it.
var EventEmitter = require('events');
var myEmitter = new EventEmitter();
myEmitter.emit('clients_data',{'"A4Q"': 'JZA8187'}); //emit your event where ever
myEmitter.on('clients_data', (obj) => {
if (typeof obj !=='undefined') {
if (obj.contructor === Object && Object.keys(obj).lenth == 0) {
console.log('empty');
} else {
for(var key in obj) {
var value = obj[key];
//do what you want here
}
}
}
});
Well, you need to format your clients object properly before you can use it with async.map(). Lodash _.map() can help you:
var client_list = _.map(clients, function(value, key) {
var item = {};
item[key] = value;
return item;
});
After that, you will have an array like:
[ { A4Q: 'JZA8187' }, { B7P: 'DAL2098' } ]
Then, you can use async.map():
exports.getAllFlights = function(getRequest) {
async.map(client_list, getFlight, function(err, results) {
getRequest(results);
});
};
I'm trying to sync some of my web component properties between instances of the same element so if one of this properties changes then the same property gets updated in all the instances with the corresponding binding and events.
Note: I want to use the Polymer Data System Concepts for the communications between instances.
Example
my-element.html
<dom-module id="my-element">
<script>
Polymer({
is: 'my-element',
properties: {
myProp: {
type: String,
notify: true
}
});
</script>
</dom-module>
my-other-element.html
<dom-module id="my-other-element">
<template>
<my-element my-prop="{{otherProp}}"></my-element>
</template>
<script>
Polymer({
is: 'my-other-element',
properties: {
otherProp: {
type: String,
notify: true,
readOnly: true
}
}
})
</script>
</dom-module>
my-app.html
<dom-module id="my-app">
<template>
<my-element id="element"></my-element>
<my-other-element id="otherElement"
on-other-prop-changed="onPropChanged"
></my-other-element>
</template>
<script>
Polymer({
is: 'my-app',
attached: function () {
// should set 'myProp' to 'test' and trigger
// the event 'my-prop-changed' in all my-element instances
this.$.element.myProp = 'test'
},
onPropChanged: function (ev, detail) {
console.log(detail.value); // should print 'test'
console.log(this.$.element.myProp); // should print 'test'
console.log(this.$.otherElement.otherProp); // should print 'test'
}
});
</script>
</dom-module>
PD: Would be good to use standard like patterns and good practices.
tl;dr
I have created a custom behaviour that syncs all elements' properties that have notify: true. Working prototype: JSBin.
Currently, this prototype does not distinguish between different kinds of elements, meaning that it can only sync instances of the same custom element - but this can be changed without much effort.
You could also tailor the behaviour so that is syncs only the desired properties and not just all with notify: true. However, if you take this path, be advised that all the properties you want to sync must have notify: true, since the behaviour listens to the <property-name>-changed event, which is fired only if the property has notify: true.
The details
Let's start with the custom SyncBehavior behaviour:
(function() {
var SyncBehaviorInstances = [];
var SyncBehaviorLock = false;
SyncBehavior = {
attached: function() {
// Add instance
SyncBehaviorInstances.push(this);
// Add listeners
for(var property in this.properties) {
if('notify' in this.properties[property] && this.properties[property].notify) {
// Watch all properties with notify = true
var eventHanler = this._eventHandlerForPropertyType(this.properties[property].type.name);
this.listen(this, Polymer.CaseMap.camelToDashCase(property) + '-changed', eventHanler);
}
}
},
detached: function() {
// Remove instance
var index = SyncBehaviorInstances.indexOf(this);
if(index >= 0) {
SyncBehaviorInstances.splice(index, 1);
}
// Remove listeners
for(var property in this.properties) {
if('notify' in this.properties[property] && this.properties[property].notify) {
// Watch all properties with notify = true
var eventHanler = this._eventHandlerForPropertyType(this.properties[property].type.name);
this.unlisten(this, Polymer.CaseMap.camelToDashCase(property) + '-changed', eventHanler);
}
}
},
_eventHandlerForPropertyType: function(propertyType) {
switch(propertyType) {
case 'Array':
return '__syncArray';
case 'Object':
return '__syncObject';
default:
return '__syncPrimitive';
}
},
__syncArray: function(event, details) {
if(SyncBehaviorLock) {
return; // Prevent cycles
}
SyncBehaviorLock = true; // Lock
var target = event.target;
var prop = Polymer.CaseMap.dashToCamelCase(event.type.substr(0, event.type.length - 8));
if(details.path === undefined) {
// New array -> assign by reference
SyncBehaviorInstances.forEach(function(instance) {
if(instance !== target) {
instance.set(prop, details.value);
}
});
} else if(details.path.endsWith('.splices')) {
// Array mutation -> apply notifySplices
var splices = details.value.indexSplices;
// for all other instances: assign reference if not the same, otherwise call 'notifySplices'
SyncBehaviorInstances.forEach(function(instance) {
if(instance !== target) {
var instanceReference = instance.get(prop);
var targetReference = target.get(prop);
if(instanceReference !== targetReference) {
instance.set(prop, targetReference);
} else {
instance.notifySplices(prop, splices);
}
}
});
}
SyncBehaviorLock = false; // Unlock
},
__syncObject: function(event, details) {
var target = event.target;
var prop = Polymer.CaseMap.dashToCamelCase(event.type.substr(0, event.type.length - 8));
if(details.path === undefined) {
// New object -> assign by reference
SyncBehaviorInstances.forEach(function(instance) {
if(instance !== target) {
instance.set(prop, details.value);
}
});
} else {
// Property change -> assign by reference if not the same, otherwise call 'notifyPath'
SyncBehaviorInstances.forEach(function(instance) {
if(instance !== target) {
var instanceReference = instance.get(prop);
var targetReference = target.get(prop);
if(instanceReference !== targetReference) {
instance.set(prop, targetReference);
} else {
instance.notifyPath(details.path, details.value);
}
}
});
}
},
__syncPrimitive: function(event, details) {
var target = event.target;
var value = details.value;
var prop = Polymer.CaseMap.dashToCamelCase(event.type.substr(0, event.type.length - 8));
SyncBehaviorInstances.forEach(function(instance) {
if(instance !== target) {
instance.set(prop, value);
}
});
},
};
})();
Notice that I have used the IIFE pattern to hide the variable that holds all instances of the custom element my-element. This is essential, so don't change it.
As you can see, the behaviour consists of six functions, namely:
attached, which adds the current instance to the list of instances and registers listeners for all properties with notify: true.
detached, which removes the current instance from the list of instances and removes listeners for all properties with notify: true.
_eventHandlerForPropertyType, which returns the name of one of the functions 4-6, depending on the property type.
__syncArray, which syncs the Array type properties between the instances. Notice that I ignore the current target and implement a simple locking mechanism in order to avoid cycles. The method handles two scenarios: assigning a new Array, and mutating an existing Array.
__syncObject, which syncs the Object type properties between the instances. Notice that I ignore the current target and implement a simple locking mechanism in order to avoid cycles. The method handles two scenarios: assigning a new Object, and changing a property of an existing Object.
__syncPrimitive, which syncs the primitive values of properties between the instances. Notice that I ignore the current target in order to avoid cycles.
In order to test-drive my new behaviour, I have created a sample custom element:
<dom-module id="my-element">
<template>
<style>
:host {
display: block;
}
</style>
<h2>Hello [[id]]</h2>
<ul>
<li>propString: [[propString]]</li>
<li>
propArray:
<ol>
<template is="dom-repeat" items="[[propArray]]">
<li>[[item]]</li>
</template>
</ol>
</li>
<li>
propObject:
<ul>
<li>name: [[propObject.name]]</li>
<li>surname: [[propObject.surname]]</li>
</ul>
</li>
</ul>
</template>
<script>
Polymer({
is: 'my-element',
behaviors: [
SyncBehavior,
],
properties: {
id: {
type: String,
},
propString: {
type: String,
notify: true,
value: 'default value',
},
propArray: {
type: Array,
notify: true,
value: function() {
return ['a', 'b', 'c'];
},
},
propObject: {
type: Object,
notify: true,
value: function() {
return {'name': 'John', 'surname': 'Doe'};
},
},
},
pushToArray: function(item) {
this.push('propArray', item);
},
pushToNewArray: function(item) {
this.set('propArray', [item]);
},
popFromArray: function() {
this.pop('propArray');
},
setObjectName: function(name) {
this.set('propObject.name', name);
},
setNewObjectName: function(name) {
this.set('propObject', {'name': name, 'surname': 'unknown'});
},
});
</script>
</dom-module>
It has one String property, one Array property, and one Object property; all with notify: true. The custom element also implements the SyncBehavior behaviour.
To combine all of the above in a working prototype, you simply do this:
<template is="dom-bind">
<h4>Primitive type</h4>
propString: <input type="text" value="{{propString::input}}" />
<h4>Array type</h4>
Push to propArray: <input type="text" id="propArrayItem" /> <button onclick="_propArrayItem()">Push</button> <button onclick="_propNewArrayItem()">Push to NEW array</button> <button onclick="_propPopArrayItem()">Delete last element</button>
<h4>Object type</h4>
Set 'name' of propObject: <input type="text" id="propObjectName" /> <button onclick="_propObjectName()">Set</button> <button onclick="_propNewObjectName()">Set to NEW object</button> <br />
<script>
function _propArrayItem() {
one.pushToArray(propArrayItem.value);
}
function _propNewArrayItem() {
one.pushToNewArray(propArrayItem.value);
}
function _propPopArrayItem() {
one.popFromArray();
}
function _propObjectName() {
one.setObjectName(propObjectName.value);
}
function _propNewObjectName() {
one.setNewObjectName(propObjectName.value);
}
</script>
<my-element id="one" prop-string="{{propString}}"></my-element>
<my-element id="two"></my-element>
<my-element id="three"></my-element>
<my-element id="four"></my-element>
</template>
In this prototype, I have created four instances of my-element. One has propString bound to an input, while the others don't have any bindings at all. I have created a simple form, that covers every scenario I could think of:
Changing a primitive value.
Pushing an item to an array.
Creating a new array (with one item).
Deleting an item from the array.
Setting object property.
Creating a new object.
EDIT
I have updated my post and the prototype in order to address the following issues:
Syncing of non-primitive values, namely Array and Object.
Properly converting property names from Dash case to Camel case (and vice-versa).
We have created a component to synchronize data among different instances. Our component is:
<dom-module id="sync-data">
<template>
<p>Debug info: {scope:[[scope]], key:[[key]], value:[[value]]}</p>
</template>
<script>
(function () {
var items = []
var propagateChangeStatus = {}
var togglePropagationStatus = function (status) {
propagateChangeStatus[this.scope + '|' + this.key] = status
}
var shouldPropagateChange = function () {
return propagateChangeStatus[this.scope + '|' + this.key] !== false
}
var propagateChange = function (key, scope, value) {
if (shouldPropagateChange.call(this)) {
togglePropagationStatus.call(this, false)
var itemsLength = items.length
for (var idx = 0; idx < itemsLength; idx += 1) {
if (items[idx] !== this && items[idx].key === key && items[idx].scope === scope) {
items[idx].set('value', value)
}
}
togglePropagationStatus.call(this, true)
}
}
Polymer({
is: 'sync-data',
properties: {
key: {
type: String,
value: ''
},
scope: {
type: String,
value: ''
},
value: {
type: String,
notify: true,
observer: '_handleValueChanged',
value: ''
}
},
created: function () {
items.push(this)
},
_handleValueChanged: function (newValue, oldValue) {
this.typeof = typeof newValue
propagateChange.call(this, this.key, this.scope, newValue)
}
})
})()
</script>
</dom-module>
And we use it in a component like this:
<sync-data
key="email"
scope="user"
value="{{email}}"></sync-data>
And in another component like this:
<sync-data
key="email"
scope="user"
value="{{userEmail}}"></sync-data>
In this way we get the native behavior of polymer for events and bindings
My personal opinion on problems like this is to use flux architecture.
you create a wrapper Element which is distributing all the information to the children. All changes a going via the main component.
<app-wrapper>
<component-x attr="[[someParam]]" />
<component-x attr="[[someParam]]" />
<component-x attr="[[someParam]]" />
</app-wrapper>
the component-x is firing an change value event on app-wrapper and the app-wrapper is updating someValue, note it's a one-way-binding.
There is a component for this, which is implementing the reduxarchitecture, but its also possible to code your own. It's more or less the observer pattern
Try this for my-app.html. I don't see any reason to not use two-way bindings here.
<dom-module id="my-app">
<template>
<my-element my-prop="{{myProp}}"></my-element>
<my-element my-prop="{{myProp}}"></my-element>
</template>
<script>
Polymer({
is: 'my-app',
ready: function() {
this.myProp = 'test';
}
});
</script>
</dom-module>
Although it's probably a better practice to give myProp a default value by using the properties object rather than the ready callback. Example:
Polymer({
is: 'my-app',
properties: {
myProp: {
type: String,
value: 'test'
}
});
In polymer 1.0, I created custom behavior pageBehavior for two custom elements. On one of the elements, I would like to extend the behavior. After reading the docs, it seems that I would need to create another behavior and place it in array. I don't want to create another behavior because only this element will be using the extra code.
With the element and the extended behavior needed, how can I add hidePrintButton and to the properties and overwrite function fullDisplayeMode?
custom element:
<script>
Polymer({
is: "resume-page",
properties: {
hidePrintButton: {
type: Boolean,
reflectToAttribute: true,
value: true
}
},
behaviors: [pageBehavior],
fullDisplayMode: function() {
this.show = true;
this.hidePrintButton = false;
this._toggleStyles();
this.nextElementSibling.show = true;
}
});
</script>
the page behavior:
<script>
pageBehavior = {
properties: {
hideRipple: {
type: Boolean,
value: false
},
fullDisplay: {
type: Boolean,
value: false
},
show: {
type: Boolean,
reflectToAttribute: true,
value: true
}
},
_mediaQuery: function(section) {
if (window.matchMedia( "(min-width: 1200px)" )) {
section.style.width = "90%";
} else {
section.style.width ="90%";
}
},
_toggleWidth: function(section, fullDisplay) {
if (fullDisplay) {
section.style.width = "100%";
} else {
this._mediaQuery(section);
}
},
_toggleHover: function(section, fullDisplay) {
if (fullDisplay) {
section.classList.remove('enabled-hover');
} else {
section.classList.add('enabled-hover');
}
},
_toggleRipple: function(fullDisplay) {
//This is necessary because if page ripple
//is hidden to quick the animation doesn't finish
if (fullDisplay) {
setTimeout(function() {
this.hideRipple = true;
}.bind(this), 700);
} else {
this.hideRipple = false;
}
},
_toggleStyles: function(fullDisplay) {
var section = this.firstElementChild;
this._toggleRipple(fullDisplay);
this._toggleWidth(section, fullDisplay);
this._toggleHover(section, fullDisplay);
},
fullDisplayMode: function() {
this._toggleStyles(true);
this.show = true;
this.nextElementSibling.show = true;
},
homeMode: function() {
this._toggleStyles(false);
this.show = true;
this.nextElementSibling.show = false;
},
disappearMode: function() {
this.show = false;
this.nextElementSibling.show = false;
}
}
</script>
A behavior method cannot be extended. It can only be overwritten. However you could still abstract the shared logic in the behavior and have some empty methods on the behavior for customization purposes.
E.g
//In your behavior
fullDisplayMode: function() {
this.show = true;
this._toggleStyles();
this.nextElementSibling.show = true;
this.prepareFullDisplayMode();
},
prepareFullDisplayMode:function(){
//Empty inside behavior
//Elements could opt to implement it with additional logic
}
Using this pattern, one of your custom elements could add additional logic by implementing the 'prepareFullDisplayMode' while the other would not need to.
I don't know since when we can do this, but we CAN extend behaviors:
https://www.polymer-project.org/1.0/docs/devguide/behaviors#extending
I'm going to use as an example the Polymer.AppLocalizeBehavior from app-localize-behavior to set the default language.
1) Namespace your behavior, so they don't collide with others:
var MyNamespace = MyNamespace|| {};
2) Write the behavior's implementation:
MyNamespace.LocalizeImpl = {
ready() {
},
attached: function() {
this.loadResources(this.resolveUrl('../../../locales.json'));
},
properties: {
language : {
value : "en"
}
},
};
3) Add the implementation to the new behavior in an array.
MyNamespace.Localize = [Polymer.AppLocalizeBehavior, MyNamespaceLocalize.Impl]
All together:
var MyNamespace = MyNamespace || {};
MyNamespace.Localize = {
ready() {
},
attached: function() {
this.loadResources(this.resolveUrl('../../../locales.json'));
},
properties: {
language : {
value : "en"
}
},
};
MyNamespace.LocalizeBehavior = [Polymer.AppLocalizeBehavior, MyNamespace.Localize]
Then, in your element, include it like this:
<link rel="import" href="../../../../bower_components/polymer/polymer.html">
<link rel="import" href="../path-to-custom-behavior/mynamespace-localize-behavior/mynamespace-localize-behavior.html">
<dom-module id="my-element">
<style is="custom-style"></style>
<template is="dom-bind">
<template is="dom-if" if="{{query}}">
<h1> {{localize("EmailActivationSuccessful")}}</h1>
</template>
<template is="dom-if" if="{{!query}}">
<h1> {{localize("EmailCodeExpired")}}</h1>
</template>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-element',
behaviors: [MyNamespace.LocalizeBehavior],
});
})();
</script>
Now, as you can see I've only included the MyNamespace.LocalizeBehavior and started using all the methods and functions from "Polymer.AppLocalizeBehavior"
This is a great way for setting the default language and only handling the language logic in a single element.
Explanation and notes:
All the properties, methods, functions that match the previous
behavior are overwritten. In this case, I overwrote the
"language" property from "Polymer.AppLocalizeBehavior".
Remember include the .html file where the old behavior is located only where you are extending the behavior. Afterwards you only include your custom behavior wherever and whenever you want.
In point #3, the array works like this: the first element is the behavior to extend/overwrite, and the second one is your implementation, or the extended behavior.
I have defined a polymer element
Polymer({
is: 'disco-ccontrol',
properties: {
midiValue: {
type: Number,
value: 0,
observer: '_valueChanged',
notify: true
},
channel: {
type: Number,
value: 0
},
channelNumber: {
type: Number,
value: 0
},
ref: {
type: Object,
computed: '_computeRef(channel, channelNumber)'
}
},
_computeRef: function(channel, channelNumber) {
var ref = new Firebase("https://incandescent-inferno-8405.firebaseio.com/user/"+channel+"/"+channelNumber);
ref.on("value", function(data) {
this.midiValue = data.val().value;
});
return ref;
},
_valueChanged: function() {
var message = { value: this.midiValue, channel: this.channel, channelNumber: this.channelNumber };
if (this.ref) {
this.ref.set(message);
}
}
});
I use this element in another element (parent element)
<disco-ccontrol midi-value="{{value}}" channel="{{channel}}" cn="{{channelNumber}}"></disco-ccontrol>
When I adapt the value property in the parent it propagates to the child. When I change the value property in the child (i.e in disco-ccontrol) it doesn't propagate up. What am I doing wrong to establish a two way binding?
In this function
ref.on("value", function(data) {
this.midiValue = data.val().value;
});
the this keyword is is not bound to the Polymer element. Thus your are not setting the midiValue on the correct object. You can bind this to the Polymer element using bind.
ref.on("value", function(data) {
this.midiValue = data.val().value;
}.bind(this);
I have an element with a model object that I want to observe like so:
<polymer-element name="note-editor" attributes="noteTitle noteText noteSlug">
<template>
<input type="text" value="{{ model.title }}">
<textarea value="{{ model.text }}"></textarea>
<note-ajax-button url="/api/notes/" method="POST" model="{{model}}">Create</note-ajax-button>
</template>
<script>
Polymer('note-editor', {
attached: function() {
this.model = {
title: this.noteTitle,
text: this.noteText,
slug: this.noteSlug
}
},
});
</script>
</polymer-element>
I want to observe changes in the model but apparently it's not possible to use modelChanged callback in the element and neither in the note-ajax-button element. What is wrong? How can I do that?
I've tried observing the fields separately, but it's not clean at all. The state of the button element you see there should change depending on the model state, so I need to watch changes for the object, not the properties.
Thanks!
To observe paths in an object, you need to use an observe block:
Polymer('x-element', {
observe: {
'model.title': 'modelUpdated',
'model.text': 'modelUpdated',
'model.slug': 'modelUpdated'
},
ready: function() {
this.model = {
title: this.noteTitle,
text: this.noteText,
slug: this.noteSlug
};
},
modelUpdated: function(oldValue, newValue) {
var value = Path.get('model.title').getValueFrom(this);
// newValue == value == this.model.title
}
});
http://www.polymer-project.org/docs/polymer/polymer.html#observeblock
Or you can add an extra attribute to your model called for example 'refresh' (boolean) and each time you modify some of the internal values also modify it simply by setting refresh = !refresh, then you can observe just one attribute instead of many. This is a good case when your model include multiple nested attributes.
Polymer('x-element', {
observe: {
'model.refresh': 'modelUpdated'
},
ready: function() {
this.model = {
title: this.noteTitle,
text: this.noteText,
slug: this.noteSlug,
refresh: false
};
},
modelUpdated: function(oldValue, newValue) {
var value = Path.get('model.title').getValueFrom(this);
},
buttonClicked: function(e) {
this.model.title = 'Title';
this.model.text = 'Text';
this.model.slug = 'Slug';
this.model.refresh = !this.model.refresh;
}
});
what I do in this situation is use the * char to observe any property change in my array, here an example of my JSON object:
{
"config": {
"myProperty":"configuraiont1",
"options": [{"image": "" }, { "image": ""}]
}
};
I create a method _myFunctionChanged and I pass as parameter config.options.* then every property inside the array options is observed inside the function _myFunctionChanged
Polymer({
observers: ['_myFunctionChanged(config.options.*)']
});
You can use the same pattern with a object, instead to use an array like config.options. you can just observe config.