Callback of template if

[alessandro meyer]

Hey there 

I have the following situation

    <template id="edit" bind if="{{ editable }}">

      <input id="editor" on-keyup="{{exit}}" value={{value}} />

    </template>

And on editable being set to true, id like to focus() the input field how do I do that? Because the stuff in the template doesn't seem to be accessible earlier as I can't reach the <input> until it is visible.

Thanks!

Cheers

Alessandro

[alessandro meyer]

I forgot to mention that my workaround is currently a

            setTimeout(function(){

                this.$.edit.nextElementSibling.focus()

            }.bind(this), 1000)

But it doesn't feel quite right.

[Max]

How are you trying to access it? Can't you put a container around it and use this.$.container.getElementById('editor'); ? As you say, the element doesn't exist, so you can't use polymer's nice '$' to access it...iinm. Perhaps you don't need the container, and can use the template's ID?

Max.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/a7654552-68be-4dd9-9e20-a0ff1b0c05ab%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[alessandro meyer]

Hey Max

Thanks for answering.

I tried accessing it also through the templates ID but the doesnt work either because the input element is simply not present. Thats why I started using using setTimeout (see my second entry) which allows it to be added to the DOM meanwhile but it really feels hackish. I am looking for a on-load like callback on input-field. 

Alessandro

[Max]

Ok, so this is about the timing of the template being invoked and when you're checking? Where are you checking? I would be checking inside an 'editableChanged' function, though I don't know if that would work either, tbh.

Any chance of a jsbin or something?

I tried this to see :

<http://jsbin.com/layenupohu/1/edit?html,output>

Let me know if there's something I'm not understanding correctly.

Max.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/20fae5bc-3623-4151-93de-914609afd53c%40googlegroups.com.

[alessandro meyer]

That looks pretty much like my example.  I can see your approach but do I have a guarantee that template if is being updated first, so that I could access it in the editableChanged callback?

Alessandro

[Max]

That's an interesting question - I'm afraid I don't know the answer...but now there's an example for the other more learned people on this list to look at :)

IINM, most of them are in the US, and it's a little early for them.

Max.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/3e059aea-9cf8-4ee9-97fd-9700b88e016a%40googlegroups.com.

[alessandro meyer]

Let's see what their take on this is. Thanks for helping out!

[Eric Bidelman]

You can do:

editableChanged: function(oldValue, newValue) {

  if (this.editable) {

    this.async(function() {

      this.$.container.querySelector('#my_input').focus();

    });

  }

}

this.async() waits one rAF frame. By that time, the template has stamped the DOM.

BTW, you can use this.async(function() {}, null, 1000) instead of setTimeout. async() binds `this` instead, so no need to .bind(this) either :)

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/12b24b53-fe1a-4cf8-9bbd-c0bd90f9e569%40googlegroups.com.

[Max]

I'm curious why people always use querySelector() instead of getElementById() - presumably the latter has lower cost, or is it now negligible?

Max.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCADt7b1VRDK3WEqhLKR1MGmG0o4cEPKRzXZgjzdXyHgwQ%40mail.gmail.com.

[Eric Bidelman]

For IDs, getElementById() is still faster: http://jsperf.com/getelementbyid-vs-queryselector

[Max]

Yes, but in a polymer element, I presume that the restricted number of elements surely means there's little to no benefit? Well, I suppose I should just test it myself :)

Max.