Polymer Tutorials #7 - Basic Two-way Data-Binding & Click Events

Learn basics of two-way data binding and click events using Polymer.

Subscribe to Level Up Pro for extra features!

Subscribe to the Level Up Newsletter

For questions post in the comments or visit:

To Support Level Up Tuts:

Simple cloud hosting, built for developers.:

[teamrobot]

You must have been up all night making these videos. XD Very helpful. Thanks.

[rochman]

Polymer 1.0 
<input value="{{name::input}}">


<button on-click="changeName">Change Name</button>

[tadhghanrahan]

Thank you, great tutorials. If you keep making them, I'll keep watching. :)

[TheDesiGamers]

hey please say about martial design not a angular js  how to apply animation or making a SPA in polymer please. 

[WesAHaque]

Great tutorial! Can you make one with a firebase backend please?

[scottpetersen]

What sublime text theme are you using?

[PlotTwists]

The JS way of handling actions and events reminds me of EmberJS ... I HATE EmberJS

[tseringlobsang]

How to execute a function when the template is ready?

For example,
Imagine I have a button with id='my-button' inside the template with id='my-template'.

var template =
template.model = somedata;  // Triggers the 2 way data binding

// Following line doesn't work because the template is not ready yet.
var btn

How can I get the button inside the template?

Is there a callback like,
template.onLoaded = function() {
    var btn =
}
?

[kmraen]

Hi, LevelUpTuts!
I have a question. How can I bind with JSON data as this way?
Your video always helpful! Thanks a lot!

[greglafrance]

Great video, but the code still has:

<polymer-element name="hello-world" attributes="name">

and

<hello-world name="Ben"></hello-world>

But the attribute value does not take effect. Should it be removed because attributes cannot be used with the code changes, or is there still a way to use an attribute to override the value?

PS, the previous video also has this question.

[amangupta]

how to listen for an event like " $('a').click(){ console.log("anchor tag is clicked")  }; "  inside polymer({  })

[DGardn]

Staring at tutorial #6, the page stopped opening in Chrome on my computer. It only opens in Firefox now. Does anyone have a clue as to why?