javascript - 使用 purejs 创建动态 id

Question

使用 purejs，我想为每个渲染元素创建动态 id。

在这段代码中，我需要为每个标签设置 id。这个“a”标签将创建取决于 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>

Answer 1

要设置动态 ID，请使用“.pos”标签。这个“.pos”将具有数组中数据的位置。

//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');