0

尝试为 AEM 中的多个按钮组件实现 onclick 标记加载需要有关最佳实践的建议。以下是我实施的方法。有人可以帮我解决这个问题。提前致谢！

<sly data-sly-test="${properties.tag}">
    <script>
        $(".input1-tag").click(function(e){
            e.preventDefault();
            var href = $(this).attr("href");
            $("body").append("<img src=\" ${properties.tag @ context ='scriptString'} \" width="1" height="1" alt="" />");
            window.location = href;
        });
    </script>
</sly>

<sly data-sly-test="${properties.optionaltag}">
   <script>
     $(".input2-tag").click(function(e){
        e.preventDefault();
        var href = $(this).attr("href");
        $("body").append("<img src=\" ${properties.optionaltag @ context ='scriptString'} \" width="1" height="1" alt="" />");
        window.location = href;
      });
   </script>
</sly>

<sly data-sly-test="${properties.thirdtag}">
   <script>
      $(".input3-tag").click(function(e){
        e.preventDefault();
        var href = $(this).attr("href");
        $("body").append("<img src=\" ${properties.thirdtag @ context ='scriptString'} \" width="1" height="1" alt="" />");
        window.location = href;
     });
   </script>
</sly>
4

1 回答 1

0

看起来更像是代码审查请求 - 适用于https://codereview.stackexchange.com/

但既然你在这里，我可以想到以下几点——

  • 将脚本代码移动.js到clientlibs. sightlyor的主要目的HTL是美化 HTML 标记并分离表示和逻辑关注点。
  • 使用 sling 模型检索属性值。
  • 在该部分中有一个占位符标签<body>并将其附加到它而不是直接附加到<body>标签，使您可以更好地控制稍后将元素定位到不同的位置。
  • 如果您预见到输入标签有更多事件，请使用事件侦听器而不是内联事件。事件侦听器与点击 - 更多信息在这里。
  • 由于您在附加标签时所做的<img>只是修改src属性，因此您可能<img>已经在标记中烘焙了标签，最初可能隐藏并使用attr()函数来设置src属性。
于 2018-08-29T01:46:43.490 回答