CODEWITHSUNDEEP
javascriptpure-js
vinothvetrivel
vinothvetrivel

Reputation: 109

Create dynamic id using purejs

Using purejs, i want to create dynamic id to each rendering element.

In this code i need to set id for each a tag. This 'a' tag will create depends on the jsonData.

<!-- HTML template -->
  <div id="template" class="template">
    Hello <a></a>
  </div>
  <!-- result place -->
  <div id="display" class="result"></div>

<script>
    var jsonData = {data:[{who:'Google!',site:'http://www.google.com/'},{who:'Yahoo!',site:'http://www.yahoo.com/'}]};

    //select the template
    $('#template')

      //map the HTML with the JSON data
      .directives({
        'div a':{
            'd<-data':{
              '.':'d.who',
              '@href':'d.site'
            }
        }
      })

      //generate the new HTML
      .render(jsonData)

      //place the result in the DOM, using any jQuery command
      .appendTo('#display');

  </script>

Upvotes: 0

Views: 155

Answers (1)

vinothvetrivel
vinothvetrivel

Reputation: 109

To set dynamic id use ".pos" tag. This ".pos" will having the position of the data in an array.

//select the template
$('#template')

//map the HTML with the JSON data
.directives({
    'div a':{
        'd<-data':{
            '@id':'xyz_#{d.pos}',
            '.':'d.who',
            '@href':'d.site'
        }
    }
})

//generate the new HTML
.render(jsonData)

//place the result in the DOM, using any jQuery command
.appendTo('#display');

Upvotes: 1

Related Questions