Any way to have Namespace'd Constructors

[Vicențiu Ciorbaru]

Hi polymer devs,

I've recently been involved in porting the trace-viewer[1] project bundled with Google Chrome to use Polymer.

Given the size of the project, and the fact that it's mostly just one big page, we've run into the need to use namespaces for our modules. In order to avoid conflicts we've attempted to implement the rule that each constructor for a polymer element should have a name like:

/path/to/file + ElementConstructor => PathToFileElementConstructor

Unfortunately, this quickly gets out of hand and has a major readability impact in the code. An example is a polymer element defined in the file /tracing/analysis/analysis-view.html. This ends up being TracingAnalysisAnalysisView. What would be really useful is to be able to export the constructor of the element within a namespace, and not have it stuck to the window object.

I'm looking for something along the lines of:

<polymer-element name="foo-element" constructor="FooElement" namespace="foo.space">
<style>
/* css */
</style>
<template>
<!-- More HTML -->
</template>

<script>
  Polymer({
    ready: function(){
      this.barProperty = [];
    }
  });
</script>
</polymer-element>

/* some other file */
<link rel="import" href="foo/space/foo_element.html">

<script>
var fooElement = new foo.space.FooElement();
</script>

I've read the available documentation on this, but I could not find an appropriate way to actually solve this issue. Is there any trick available to solve this?

Regards,

Vicențiu Ciorbaru

[1] https://code.google.com/p/trace-viewer/

[Steve Orvell]

I suggest filing an issue here: https://github.com/Polymer/polymer-dev/issues.

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/ab9aa813-266e-4287-916e-c2595cffcfbc%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Vicențiu Ciorbaru]

I've opened an issue there to a link to this thread. It would be helpful to have any potential workaround ideas in the meantime, if you have any.

Vicențiu

[Scott Miles]

One possibility is to make a custom constructor:

<script>

  foo.space.FooElement = function() {

    return document.createElement('foo-element');

  }
</script>

you can also use this technique to make constructors that take arguments.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/44c4b3de-6624-4e3d-9ce7-539ac77c3c07%40googlegroups.com.

[Rob Dodson]

That's a pretty neat tip!

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

[ulyb...@gmail.com]

Thanks for the tip !

I'm having trouble to make it work with elements that extends Native HTML elements.

I noticed that when using the `constructor` attribute in polymer-element, it will smartly returns a fully working element (let's say FooElement extends button) :

<button is="foo-element">...</button>

So I tweaked your function like this : (let's say FooElement extends button) 

foo.space.FooElement = function() {
 var el = document.createElement('button');
   el.setAttribute('is','foo-element')
 return el;
}

which returns in appearance the same thing as the constructor defined as attribute, but that is in fact just a simple button with a dummy "is" attribute.

Any ideas on how to make namespace constructor of elements that extend native Html ?

Thanks

[Steve Orvell]

Custom elements that use the `is` syntax to extend native elements must be created imperatively like this:

    document.createElement('button', 'foo-element');

There's more info here for reference: http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/2bdfa8bd-97ee-4c45-8590-451a0753607d%40googlegroups.com.

[ulyb...@gmail.com]

That's perfect, thanks !