HTML부품(동적)

아래와 같이 인클루드하는 쪽의 변수를 컴포넌트에서도 참조할 수 있다. 변수영역은 자바스크립트처럼 로컬영역이다. (호출하는 쪽의 변수를 호출당하는 쪽에서도 참조할 수 있다)

hello.html

<html> <body> <h1>Hello</h1> <span id="loop"> <div id="comp">dummy</div> </span> </body> </html>

hello.mayaa

<?xml version="1.0" encoding="UTF-8"?> <m:mayaa xmlns:m="http://mayaa.seasar.org"> <m:for m:id="loop" init="${ var count = 0 }" test="${ count &lt; 5 }" after="${ count++ }" /> <m:insert m:id="comp" path="/component.html" /> </m:mayaa>

component.html

<html> <body> <h1>dummy for preview</h1> <span id="centered"> <div id="message" style="text-align: center">component value</div> </span> </body> </html>

component.mayaa

<?xml version="1.0" encoding="UTF-8"?> <m:mayaa xmlns:m="http://mayaa.seasar.org"> <m:doRender m:id="centered" /> <m:write m:id="message" value="Hello Mayaa! ${ count }" replace="false" /> </m:mayaa>

실행결과

<html> <body> <h1>Hello</h1> <div id="message" style="text-align: center">Hello Mayaa! 0</div> <div id="message" style="text-align: center">Hello Mayaa! 1</div> <div id="message" style="text-align: center">Hello Mayaa! 2</div> <div id="message" style="text-align: center">Hello Mayaa! 3</div> <div id="message" style="text-align: center">Hello Mayaa! 4</div> </body> </html>

변수를 전달하기

위의 예에서 처럼 미리 정의된 변수에 접근하는 방법 이외에 아래와 같이 변수를 명시적으로 전달 할 수도 있다. 컴포넌트에서는 ${binding.변수명}으로 그 변수에 접근할 수 있다.

hello.html

<html> <body> <h1>Hello</h1> <div id="comp">dummy</div> </body> </html>

hello.mayaa

<?xml version="1.0" encoding="UTF-8"?> <m:mayaa xmlns:m="http://mayaa.seasar.org"> <m:insert m:id="comp" path="/component.html" title="Component Title" /> </m:mayaa>

component.html

<html> <body> <h1>dummy for preview</h1> <span id="centered"> <h2><span id="componentTitle">Dummy Title</span></h2> <div id="message" style="text-align: center">component value</div> </span> </body> </html>

component.mayaa

<?xml version="1.0" encoding="UTF-8"?> <m:mayaa xmlns:m="http://mayaa.seasar.org"> <m:doRender m:id="centered" /> <m:write m:id="componentTitle" value="${ binding.title }" /> <m:write m:id="message" value="Hello Mayaa!" replace="false" /> </m:mayaa>

실행결과

<html> <body> <h1>Hello</h1> <h2>Component Title</h2> <div id="message" style="text-align: center">Hello Mayaa!</div> </body> </html>

insert프로세서에 이미 존재하는 속성명과 중복되는 이름(id, path등)은 변수명으로 전달할 수 없다. 이런 경우 아래와 같이 네임스페이스를 추가해서 중복을 피할 수 있다.

<?xml version="1.0" encoding="UTF-8"?> <m:mayaa xmlns:m="http://mayaa.seasar.org" xmlns:x="my_namespace"> <m:insert m:id="comp" path="/component.html" x:title="Component Title" /> </m:mayaa>

request, session의 값 공유
당연한 얘기지만 request, session을 통해서도 값을 전달 할 수도 있다.


Comments