Polymer在JavaScript中获取参数值

Question

I defined a custom element "wineItem"

http://pastebin.com/VWh2Dk4J (I couldn't paste here the code)

When I want to call this element in a page I do something like this:

            <wine-item id_wine={{params.id_wine}}></wine-item>

The problem is that the value of "id_wine" inside the "wine-item" in the ready function is undefined, but in the html value appears properly.

What can I do?

Thank you.

Answer 1

The value of id-wine inside wine-item is undefined in the ready function because you did not explicitly create it as a property for the wine-item element. Your element should look like this :

 <link rel="import" href="../../../bower_components/polymer/polymer.html"> <dom-module name="wine-item"> <template> <span>{{id_wine}}</span> </template> <script> Polymer({ is:'wine-item', // Adding properties properties:{ id_wine:String // type can be Object Array or Number , refers to polymer doc }, ready: function() { // Now you can access id_wine in your ready function with `this` this.id_wine='idtest'; // $ allow to access element in the local DOM like <span id='id_wine'></span> // this.$.id_wine = this.id_wine; /* console.log(this.id_wine); console.log(this.$.id_wine)*/ } }); </script> </dom-module> 

 <wine-item id-wine="newIdTest"></wine-item> 

Now if your intention is to create an element with id ( Javascript id ) it is not possible, you can do it in the html when using the element like native html components

<wine-item id="id-of-my-element"></wine-item>

Answer 2

<dom-module name="wine-item">

is wrong, this should be:

<dom-module id="wine-item">

Maybe that is the reason why your variable is undefined

Edit

To access to variable using javascript you will have to use as follows:

this.yourVariable

Edit

My bad, I did not know that is possible to use "name" instead of "id".

 <dom-module name="hello-test">
  <template>
    hello <span>{{name}}</span>
    <button on-tap="showData">show data</button>
  </template>
  <script>
    Polymer({
      is:"hello-test",
      name:{
        type:String
      },
      showData: function(){
        console.log(this.name);
      },
    });

  </script>
</dom-module>
  <hello-test name="Alex"></hello-test>

Answer 3

I got it.

The problem is that sometimes the ready function doesnt load when its ready.

Just put a timer and it works!

    ready: function()
    {
        this.async(function ()
          { 
             ....
          },50);
    }