2017년 1월 20일 금요일

[jsRender] jsRender 사용 되는 기본 표현식 및 기본 개념 정리

스크립트와 html 코드를 분리할 방법을 찾다가  jsRender를 사용하게 되었습니다.
단순한 작업은 그냥 봐도 사용하는데 문제가 없는데 점점 케이스가 다양해지면서 역시 기본이 개념에 대한 이해가 필요해 지더군요.
그래서 jsRender를 사용하다 기본적으로 참고할 만한 사항을 정리 하였습니다.

1. 탬플릿 태그

1) {{: ...}}
 데이터의 경로나 표현식을 넣으면 데이터나 표현식의 결과를 출력한다.

[data]
var person = {
    name : "joe",
    age : 30,
    tag : "very good man"
}

[example]
{{: name}} => joe
{{:"Hi! " +name}} => Hi! joe
{{:age + 10}} => 40
{{:: name == 'peter'}} => false

2) {{> ...}}
    {{: ...}} 와 동일하나 HTML-encoded 형태로 출력한다. (HTML 태그를 그대로 출력한다.)

[example]
{{:tag}} => very good man
{{>tag}} => very <b>good</b> man

2. view 와 data

view는 일종의 jsRender에서 사용하는 블럭 단위라고 생각하면 됩니다. 
각 view에는 data라는 property 가 있어서 전달받은 객체가 data에 담기게 됩니다. 
만약 사용자가 person객체를 넘기면 하나의 view가 생기면서 data = person 이 됩니다. 
이 view가 블럭 태그(에를 들면 for 같은, 단 if는 제외)를 만나면 하위 view 생기고 하위 view에 data 생성 됩니다.

루프 블럭을 예로 들자면 처리중 for 구문을 만나게 되면 arrayView가 생성되고 해당 data = array 가 됩니다. 그리고 루프를 돌게 되면 해당 array의 각 하나의 요소를 가진 itemView가 생기게 됩니다. 
이렇게 되면 array[index]가 itemView의 data가 되게 됩니다.

패스를 사용할때 현재 view의 data는 생략해도 됩니다 하지만 상위 view의 데이터를 접근할때는 꼭 써줘야만 접근이 가능합니다.


3. 패스(Path)
    객체에 접근하는 방식으로 객체의 타입에 따라서 접근하는 방식에 차이가 있습니다.

1) Data paths - {{ ... }} 
    일반적으로 사용하는 데이터에 접근 하는 표현 방식입니다. 별도로 붙이는게 없이 그냥 사용하면 됩니다.
    현재 view에 있는 data 요소에 접근하는 방식으로 data를 생략하고 사용하면 됩니다.
    예를 들면 person 이라는 객체를 받은 경우 data.name 또는 name 으로 접근 하면 됩니다.
    dataProperty.bb.cc

3) View Paths - {{ #...}}
    view의 요소에 접근 하는 표현 방식 입니다. # 을 붙여서 사용 합니다.
    #view 는 현재의 view 블럭을 가르키고  #view.data 는 #data 로 표현이 가능합니다.
    #viewProperty.bb.cc

    view에는 다른 view에 접근 하거나 기본적용 요소들이 있습니다.
    이 표현으로 유용한 요소는  상위 view를 표현하는 #parent 나 loop 블록에서 사용되는 #index  요소가 있습니다.
    상위  view 에 있는 team 이라는 객체에 접근하고 싶은 경우 다음과 같이 표현하면 됩니다.
    #parent.data.team

4) Helper paths - {{~...}}
    helper 패스는 사용자가 생성해서 설정한 함수, 객체 등을 사용할때 사용하는 표현 방식으로 jsRender에 함수 같은것을 넘겨서 사용할때 사용하게 됩니다.
    그리고 contextual 파라메터를 접근할때도 사용하게 됩니다. (~root)
    ~myHealper.bb.cc


* 참조
  - https://www.jsviews.com/#paths
  - https://www.jsviews.com/#helpers
  - https://www.jsviews.com/#contextualparams
  - https://www.jsviews.com/#views
  - https://www.jsviews.com/#views@datacontext

댓글 없음:

댓글 쓰기