One of the primary reason that Polymer includes a declarative custom element syntax is to make this exact use case easy. I recommend declaring your column-item using <polymer-element>.
There are a bunch of examples here: http://www.polymer-project.org/docs/start/creatingelements.html. Here's a quick version of how your example would look: <polymer-element name='column-item'> <template> <style>/* removed for brevity*/</style> <input id='col_data' type="text" class="ci-empty" placeholder='yes on-focus="{{inputFocusHandler}}"'></input> <input id='my_btn' type='button' value='click it' on-tap="{{buttonTapHandler}}"></input> </template> <script> Polymer('column-item', { buttonTapHandler: function(event) { // do stuff, and btw, here's how you can access your other input this.$.col_data.focus(); }, inputFocusHandler: function(event) { // do stuff }, }); </script> </polymer-element> Hope that helps. On Sun, Feb 23, 2014 at 8:33 PM, Dominic Cooney <[email protected]> wrote: > This might be the sort of question the moderators would prefer to answer > on StackOverlow; see the thread about "try > StackOverflow!"<https://groups.google.com/d/msg/polymer-dev/7nuNkmxNivw/CTohDKlXMx8J> > > I don't know what node-webkit is, but it looks like the line that does > > > var template = document.querySelector('column-item'); > > is not going to do what you want, because > > <template id='column-item'> > > does not match the selector 'column-item'. > > You should also use importNode instead of cloneNode, see the thread about > "elements in templates won't come > alive"<https://groups.google.com/d/msg/polymer-dev/qkl8l3c_SUU/GBPs9uOEIk4J>for > details. > > HTH, > > Dominic > > On Mon, Feb 24, 2014 at 10:36 AM, Just.A.Guy <[email protected]>wrote: > >> My goal is to learn to wire up events in a custom element to members of >> the custom template. >> >> I have follow all of the steps in >> http://www.polymer-project.org/docs/start/customelements.html ( tutorial >> 101). >> This builds the custom element as part of the index.html file. >> After much frustration I finally got it to work under Chrome and >> node-webkit. >> >> The I tried to cut and paste the code into a separate file and use >> link-import to >> load that file. Well it does not work. >> I have tried many many ways to get a clone of the template so that the >> clone can be added to the shadowRoot. >> The failure is occurring in the createdCallback routine that was attached >> the modified prototype that was >> passed to the document.registerEvent call. >> >> It is in the createdCallback routine that I also attempt to link the >> listeners to the buttons. It never >> get that far. >> >> Consequently none of the elements appear in the main document (other than >> unresolved). >> >> here is the script I pasted into the import dataset: >> >> >> ---------------------------------------------------------------------------------- >> <template id='column-item'> >> <style scoped> >> .ci-empty >> { >> font-family: courier; >> font-style: normal; >> font-weight: normal; >> color: black; >> background-color: white; >> padding: 5px; >> border: 0px; >> } >> .ci-selected >> { >> font-family: courier; >> font-style: normal; >> font-weight: normal; >> color: black; >> background-color: yellow; >> padding: 5px; >> border: 0px; >> } >> </style> >> <input id='col_data' type="text" class="ci-empty" >> placeholder='yes'></input> >> <input id='my_btn' type='button' value='click it'></input> >> </template> >> <script> >> var p = Object.create(HTMLElement.prototype); >> var showInDom = function() >> { >> var shadow = this.createShadowRoot(); >> this._root = shadow; >> var template = document.querySelector('column-item'); >> var clone = template.content.cloneNode(true); >> shadow.appendChild(clone); >> // initial_listeners(shadow); >> }; >> p.createdCallback = showInDom; >> p.attachedCallback = function() >> { >> }; >> p.detachedCallback = function() >> { >> }; >> document.registerElement('column-item',{prototype: p}); >> </script> >> >> >> -------------------------------------------------------------------------------------------------------------- >> I am using node-webkit for this debugging. It is quicker than chrome >> inspect. >> >> (I have tried document.$.<element_name>. This does not work!) >> >> The link-import works - I have removed "console.log" lines that I use for >> debugging. >> I can see their messages in the develop >> >> Any help is appreciated. >> >> 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 [email protected]. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/polymer-dev/e1f69b52-4126-4ffa-96e4-517cbfc639f1%40googlegroups.com >> . >> For more options, visit https://groups.google.com/groups/opt_out. >> > > > > -- > <http://goto.google.com/dc-email-sla> > > 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 [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/CAHnmYQ92ETW3To-nMYHY3w9i4RNpLWv%3D8xL%2B_%3DLu_0mOvT4PBw%40mail.gmail.com > . > > For more options, visit https://groups.google.com/groups/opt_out. > 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 [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZghQrPMZCUqDcfdqCq-zWaznxv9scbnMLHNKxObnbp%2BSQ%40mail.gmail.com. For more options, visit https://groups.google.com/groups/opt_out.
