CODEWITHSUNDEEP
javascriptpolymerpolymer-1.0
Pedro Henrique Calixto
Pedro Henrique Calixto

Reputation: 335

Using dom-module attributes in js tag

It's my first time using polymer and javascript. I'd like to know if it's possible to use a dom-module attribute as a js function parameter. Here comes a piece of my code:

    <dom-module id="sustenagro-matrix" attributes="numbers params space">
     <template>

        <script type="text/javascript">
             Matrix(space, params);
        </script>
     </template> 

     <script>
        Polymer({
            is: "sustenagro-matrix"
        });
     </script>
   </dom-module>

I'd like to use numbers and space as parameters for the js function Matrix. Is it even possible? Is there another way to get it done?

Thanks ;D

EDIT:

new code:

<dom-module id="sustenagro-matrix">
<template>

    <h1>SustenAgro Matrix {{number}}</h1>
    <h2>{{params}}</h2>

    <script type="text/javascript">
         //Matrix(space, params); **SPACE AND PARAMS DON'T WORK HERE. HOW CAN I GET THEM?**
    </script>
</template> 

<script>
    Polymer({
        is: "sustenagro-matrix",
        properties: {
            numbers: Number,
            params: String,
            space: String
        }
    });
</script>

Upvotes: 1

Views: 982

Answers (2)

Scott Miles
Scott Miles

Reputation: 11027

Here is some (working) example code that maybe can point you in the right direction.

<!doctype html>
<head>
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
</head>
<body>
  <x-example numbers="3" spaces="2" params="hi"></x-example>
  <dom-module id="x-example">
    <template>
      <h1>SustenAgro Matrix {{number}}</h1>
      <div id="matrix"></div>
    </template>
    <script>
      // only need this when in the main document and on non-Chrome
      addEventListener('WebComponentsReady', function() {
        Polymer({
          is: 'x-example',
          observers: [
            'buildMatrix(numbers, spaces, params)'
          ],
          buildMatrix: function(numbers, spaces, params) {
            this.$.matrix.innerHTML = Matrix(numbers, spaces, params);
          }
        });
      });
    </script>
  </dom-module>
  <script>
    // just so there is something, I don't know what your function does exactly
    Matrix = function(n, s, p) {
      return [n, s, p].join('|');
    }
  </script>
</body>

Upvotes: 2

ktiedt
ktiedt

Reputation: 436

You can reference those values by getting a reference to your custom element using DOM methods like getElementById or querySelector, for example: document.getElementById('mymatrix').space

Also, Polymer 1.x does not use the attributes attribute, that is all handled by the properties object in the Polymer() custom element registration.

Upvotes: 0

Related Questions