Polymer paper menu button -
I am new to web development and am trying to learn how to use polymer to create a simple webpage. I have created a drop down menu named after names in the json file similar to the example below. I do not understand how to display data related to the selected menu item. Below is a demo code from the polymer project, I think some of you may find this question very simple. Thanks in advance for your patience and any support that can be provided.
& lt; Paper menu button & gt; & Lt; Paper-icon-button icon = "menu" noics & gt; & Lt; / Paper-icon-button & gt; & Lt; Paper dropdown class = "dropdown" & gt; & Lt; Core-menu class = "menu" & gt; & Lt; Repeat template = "{{food in}}" & gt; & Lt; Paper items & gt; {{}} & Lt; / Paper items & gt; & Lt; / Template & gt; & Lt; / Core-menu & gt; & Lt; / Paper dropdown & gt; & Lt; / Paper menu button & gt;
In many ways you can see a menu for user input
Method 1 You can use an EventListener to view core-selection events. To do this, you have to give the core-menu an ID. I'm calling it to choose which will make the function
this way. $ Select.addEventListener ('core-select', function () {// use the value with it.)); Method 2 You can also use the declarative approach using an event list, but this time as the attribute on-core-select = "{{select Select}} " will look like the function.
select Action: function () {// value it will be. $ Choose. Select if use select ID on the core menu) Method 3 You can also use an attribute change function to get value when changed. This method will look like this.
& lt; Paper menu button & gt; & Lt; Paper-icon-button icon = "menu" noics & gt; & Lt; / Paper-icon-button & gt; & Lt; Paper dropdown class = "dropdown" & gt; & Lt; Core-menu class = "menu" selected = "{{selected}}" & gt; & Lt; Repeat template = "{{food in}}" & gt; & Lt; Paper items & gt; {{}} & Lt; / Paper items & gt; & Lt; / Template & gt; & Lt; / Core-menu & gt; & Lt; / Paper dropdown & gt; & Lt; / Paper menu button & gt; The change will call a function which
selectedChanged: function () {// value it will be. Will be selected} I created a plunker showing all 3 check check consoles for output when editing <3p>
It is assuming that you have a custom element Working inside. A custom element will still work outside method 1 Method 2 and 3 will require an auto-binding template