Реализация тега AEM onclick - PullRequest
Новая
       11

Реализация тега AEM onclick

0 голосов
/ 28 августа 2018

Попытка реализовать загрузку тега onclick для нескольких компонентов кнопки в AEM Нужно предложение по наилучшей практике. ниже метод, который я реализовал. Может кто-нибудь, пожалуйста, помогите мне с этим. Заранее спасибо! 

<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>

1 Ответ

0 голосов
/ 29 августа 2018

Выглядит больше запроса на проверку кода - подходит для https://codereview.stackexchange.com/

Но так как вы здесь, я могу думать о следующем -

  • Переместить код скрипта в файл .js в clientlibs. Основная цель sightly или HTL состоит в том, чтобы украсить HTML-разметку и разделить представления и логические проблемы.
  • Использование моделей строп для получения значений свойств.
  • Имейте метку-заполнитель в разделе <body> и добавляйте к ней вместо тега <body>, что дает вам больший контроль над позиционированием элемента в другое место в дальнейшем.
  • Если вы предвидите больше событий для входных тегов, используйте прослушиватель событий вместо встроенных событий. Слушатель событий против клика - Подробнее здесь .
  • Поскольку все, что вы делаете при добавлении тега <img>, это просто изменение атрибута src, вы можете иметь тег <img>, уже запеченный в разметке, возможно, изначально скрытый, и использовать функцию attr() для установки src атрибут.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...