How to manipulate elements in the polymer?

[Rafael Amorim]

Hi guys,

How to manipulate elements in the polymer?

Example:

<dom-module id="my-element" >

    <template>

        <iron-ajax auto url="test.json" handle-as="json" last-response="{{data}}"></iron-ajax>

        <p>...</span></p>

    </template>

</dom-module>

<script>

    Polymer({

        is: "my-element",

    });

</script>

<my-element></my-element>

I'd like to handle this element  <my-element></my-element> via DOM. But Firefox is not working, do not find the element. In Google Chrome works perfectly.

[Kevin Schaaf]

It's not clear exactly what you mean by "handle in DOM", but if your above example is in the main document, note that as a requirement for the HTML Imports polyfill, you need to wait for imports to complete loading before calling into script loaded by it (this is only for scripts the main document; scripts in any transitive imports don't have this requirement, since the polyfill can control timing of when they run).  With native HTML imports (Chrome), scripts evaluate naturally in import order without this.

Since the Polymer() method is loaded by the polymer.html import, you should wrap your call to Polymer with HTMLImports.whenReady, as follows:

<link rel="import" href="components/polymer/polymer.html">

<link rel="import" href="components/iron-ajax/iron-ajax.html">

<dom-module id="my-element" >

    <template>

        <iron-ajax auto url="test.json" handle-as="json" last-response="{{data}}"></iron-ajax>

        <p>...</span></p>

    </template>

</dom-module>

<script>

    HTMLImports.whenReady(function() {

      Polymer({

          is: "my-element",

      });

    });

</script>

<my-element></my-element>

This may be causing the difference between Chrome & FF that you are seeing.  If not, please feel free to provide more details on what you are doing and how it is failing.

Kevin

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/e708e878-495b-46e7-80f8-5e0c2fc787cb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Rafael Amorim]

Hi Kevin,

I'm sorry, my english not very well. I didn't express very well.

when I call my element <my-element> in my HTML page, is loaded all my model that I built with pure HTML elements such as <div>, <ul>, <li>, <a>, <p> and etc.

result:

<my-element>

<div>

<ul> <li> iteration here </ li> </ ul>

</div>

</my-element>

I had to use some Javascript / DOM properties in HTML elements. But only in the Google Chrome browser that was visible in Firefox it is not visible.

I'm using this way:

myFunction: function () {

         . this.$.foo.textContent = 'New foo.';

}

Previously I was trying to access it this way:

myFunction: function () {

        document.getElementById('foo').textContent = 'New foo.';

}

thanks for answer. 

Best regards,

Rafael Amorim