Creating custom element fails when code is moved to import file - cannot clode template

[Just.A.Guy]

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. 

[Dominic Cooney]

This might be the sort of question the moderators would prefer to answer on StackOverlow; see the thread about "try StackOverflow!"

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" for details.

HTH,

Dominic

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/e1f69b52-4126-4ffa-96e4-517cbfc639f1%40googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--

[Steve Orvell]

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.

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.