Блог

Я создаю виджет с тегом lib, который зависит от большого количества javascript, загружаемого в браузер. Я записал все это в taglib в виде текста и отправил его с помощью out << , но я думаю, было бы чище, если бы я извлек скрипт и включил его в качестве ресурса. Однако возникли некоторые проблемы с пониманием того, как отделить javascript от кода grails в taglib

Упрощенный пример того, что я пытаюсь сделать — допустим, тег ‘name’, который показывает имя пользователя, но при нажатии он выдает идентификатор пользователя:

В качестве тега я мог бы написать:

 class FooTagLib {
    static encodeAsForTags = [tagName: [taglib:'html'], otherTagName: [taglib:'none']]
    static namespace = 'foo'
    def name = {attrs, body ->
        out << "<p id = ${attrs.uid}>${attrs.username}</p>"
        out << "<script type='text/javascript'>"
        out << """
$('#{$attrs.uid}.click( function() {
alert("ID for user ${attrs.username} is ${attrs.uid}); });
"""
    }
}
  

И тогда в моем gsp я мог бы просто написать:a

 <foo:name username="${user.name}" uid="${user.id}"></foo:name>
  

Чего я не могу понять, так это как извлечь функцию click из taglib в библиотеку javascript, чтобы я мог превратить FooTagLib в это: Как мне передать attrs.username и attrs.uid, чтобы они были доступны в файле javascript?

  class FooTagLib {
        static encodeAsForTags = [tagName: [taglib:'html'], otherTagName: [taglib:'none']]
        static namespace = 'foo'
        def name = {attrs, body ->
            out << "<p id = ${attrs.uid}>${attrs.username}</p>"
            out << "<asset:  type='text/javascript'>"
            out << "<asset:javascript src='footag.js'/>
         }
    }
  

Один из способов добиться этого — использовать данные Jquery.

Напишите свой тег следующим образом:

 out << "<p id='my-p-with-data' data-id='${attrs.uid}' data-name='${attrs.username}'>${attrs.username}</p>"
  

Ваш отображаемый HTML-код:

 <p id='my-p-with-data' data-id='5' data-name='John Doe'>John Doe</p>
  

И затем вам нужно использовать JS:

 alert("ID for user " $('#my-p-with-data').data( 'name' )   " is "   $('#my-p-with-data').data( 'id' ))  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id='my-p-with-data' data-id='5' data-name='John Doe'>John Doe</p>