CODEWITHSUNDEEP
htmljsondata-bindingpolymer
Samuel LESPES CARDILLO
Samuel LESPES CARDILLO

Reputation: 41

polymer data binding through attributes

I am trying to use data binding through attributes on Polymer but I'm just going from failure to failure. I tried many syntax to send my JSON but nothing seems to work... Can I ask a little bit of help to see and understand what i was doing wrong ?

Thanks in advance,

Here is my HTML code :

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Self Tutorial 02</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
  <link rel="import" href="social-nav.html">
</head>
<body>
  <social-nav social='[{"twitter":"@cyberwarfighte1"}]'></social-nav>
</body>
</html>

And here is my polymer element :

<polymer-element name="social-nav" attributes="social">
  <template>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" media="screen" type="text/css" />
    <div class="social-icons">
        {{social}}
        <template repeat="{{k in social}}">
          {{k}}
        </template>
    </div>
  </template>
  <script>
    Polymer('social-nav', {
    });
  </script>
</polymer-element>

Upvotes: 2

Views: 746

Answers (1)

Samuel LESPES CARDILLO
Samuel LESPES CARDILLO

Reputation: 41

Well, I found a way to solve my problem by myself.

For anyone who have the same problem than me, the answer is that your attribute need to be declared as an object inside the polymer element.

Here is my fixed code : 

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" media="screen" type="text/css" />
  <polymer-element name="social-nav" attributes="social">
      <template>
        <div class="social-icons">
            <template repeat="{{k in social}}">
              <a class="{{k.social}}" href="{{k.link}}"><i>{{k.social}}</i></a>
            </template>
        </div>
      </template>
      <script>
       Polymer('social-nav', {
         created: function(){ 
           this.social = []; // <- HERE !!
         }
       });
      </script>
    </polymer-element>

And my fixed element call with the good JSON 

<social-nav social="[{'social':'twitter','link':'http://twitter.com/cyberwarfighte1'},  {'social':'facebook','link':'http://facebook.com/samuel.cardillo.5'}]"></social-nav>

Hope it can help someone :)

Upvotes: 2

Related Questions