Polymer: ID case conversion for $

Created on 8 Jun 2016 · 10Comments · Source: Polymer/polymer

Given this DOM: <div id="foo-bar">

I have to use this to find the node: this.$['foo-bar']

It would be nice if the ID was case converted (or available in both cases) like this: this.$.fooBar

Rationale: easier syntax (which $ is meant to provide anyway) and Polymer does the same case conversion for attribute names too.

Source

fejesjoco

All 10 comments

The solution fortunately is simple. There's a method on functions called bind that returns a new function that has the this immutably baked in. So var theMethod = val.method.bind(val); theMethod() has this bound to val.

In the future for many cases we'll be able to use ES6 Arrow function to get this behavior baked in at function definition time, but for now, when passing a method around (e.g. to register an event handler) be sure to bake the this in explicitly with bind.

amitkumarj441 on 10 Jun 2016

I don't understand this comment, are you sure you wanted to add it to this issue? This is about ID case conversion, not function binding.

fejesjoco on 10 Jun 2016

😕1

What's the problem actually you're getting? I tried resolving this issue based on your previous comment. Binding is just an example which i want to show you.

amitkumarj441 on 10 Jun 2016

How does function binding solve ID case conversion?

fejesjoco on 10 Jun 2016

😕1

a function's this value is set by how it is called. Suppose you have a value val with a method method. If method is called like val.method() then in that call to method then this is val. If you instead do var theMethod = val.method; theMethod(); then for that call, this is something else (the global context object, in browsers this is window).

amitkumarj441 on 10 Jun 2016

I know how function binding works, but how does that change the $ method in how it looks up elements by their ID?

fejesjoco on 10 Jun 2016