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


Comments

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

html - CSS autoheight, but fit content to height of div -

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -