I want to send the 'categorylist' from 'submenu-list.html' to the component 'category.html' by the onclick function 'response' using observer. how can I do it (without using local-storage)? (Kindly show by editing the code)
/* submenu-list.html */
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="submenu-list">
<template>
<paper-menu>
<paper-item><a onclick="response">My Menu Items</a></paper-item>
</paper-menu>
</template>
<script>
Polymer({
is:'submenu-list',
properties: {
categorylist: {
type: Array,
value:[]
}
},
response: function() {
}
})
</script>
</dom-module>
/* category.html */
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="category">
<template>
</template>
<script>
Polymer({
is:'category',
})
</script>
</dom-module>
well the quick answer is you can`t. At least from the information you gave. Since these components seem not to be connected somehow there is no direct way to communicate between components. Possible Solutions are you write the Information into the Local Storage but as you stated you don´t want to do that. Other solutions might be redux or a rest Service but i guess thats also not an option. The last suggestion is that these both Components are siblings? then you could just use Polymer default databinding? for instance:
<submenu-list categorylist="{{categorylist}}"></submenu-list>
<category categorylist="{{categorylist}}"></category>
and then in both components add:
categorylist: {
type: Array,
value:[],
notify:true,
observer: '_categorylistChanged'
}
Now you have to implement the _categorylistChanged function which will be called when categorylist was changed.
_categorylistChanged: function(newValue, oldValue){
//do something
}
Dont´t forget when you want to change categorylist to call
this.set('categorylist', //your new value)
Otherwise the observers won´t be triggered.