javascript - 如何通过 Handlebars 为动态元素指定唯一的名称？

每次调用脚本时，我都希望输入字段具有唯一的名称，并且名称不应相似。一个人怎么能做到这一点？

<button>Add new field</button>
<script type="text/x-handlebars-template" id="file_name">
  <input type="file" >
</script>
<script type="text/javascript">
    $('button').on('click',function(){
        var template = $('#file-name').html();
        var source = Handlebars.compile(template);
        $('body').append(source());
    });
</script>

最佳答案

您可以使用以下功能创建唯一的ID宽度：

<script>
    function create_uid() {
      function s4() {
        return Math.floor((1 + Math.random()) * 0x10000)
          .toString(16)
          .substring(1);
      }
      return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
        s4() + '-' + s4() + s4() + s4();
    }
</script>

为您的hbs模板使用唯一的ID作为变量：

<button>Add new field</button>
<script type="text/x-handlebars-template" id="file_name">
  <input id="{{uid}}" type="file" >
</script>
<script type="text/javascript">
    $('button').on('click',function(){
        var template = $('#file-name').html();

        var data =  {};
        data.uid = create_uid();

        var source = Handlebars.compile(template)(data);

        $('body').append(source());
    });
</script>

如果需要：在车把中将此功能构建为助手：http://handlebarsjs.com/builtin_helpers.html