템플릿 코드 리던던시 피하기

저는 웹 개발과 javascript/nodejs/expressjs를 주로 사용하는 초보자입니다. 몇 달 동안 저를 괴롭 히고있는 특정 문제에 직면 해 왔습니다. 너무 복잡하거나 너무 지저분하지 않다. 보기에서 내가 3 프레임, 그리고이 세 프레임에서 나는 세 가지에 대한 데이터의 동일한 구조를 가지고 있지만 다른 값을 가진 개체의 배열을 나열해야합니다 그리고 그 값에 따라 특정 개체를 강조 표시해야합니다 html로, 나는 옥을 사용하는 시간에 "if ... else ... case ..."의 같은 사슬을 반복한다. 세 번, 나는 handlebars/hogan.js로 바꾸고 데이터를 필터링하는 것을 시도했다. 렌더링하기 전에 각각의 경우에 대한 특정 HTML 구조를 만들었지 만, 응용 프로그램의 프론트 엔드를 초기 개발할 때부터 시각적으로보기를 빠르게 변경하는 것은 어렵고 혼란스럽게 만드는 또 다른 혼란을 야기했습니다. 가장 간단한 방법/콧수염 (hogan)/핸들/비취를 사용하여 작업을 수행하는 방법?템플릿 코드 리던던시 피하기

나는 여왕으로 고통 받고 있습니다. (다른 ... 경우의 훨씬 더있다 ... 원래의 코드와도 훨씬 더 큰 HTML 구조)

div(class='frame red' 
    for object in array 
     if object.annex 
      case object.annex.type 
       when 1 
        i object.annex.text 
       when 2 
        b object.annex.text 
       when 3 
        span(class='normal') object.annex.text 
     else 
      case object.type 
       when 1 
        i object.text 
       when 2 
        b object.text 
       when 3 
        span(class='normal') object.text 

div(class='frame blue') 
    for object in array 
     if object.annex 
      case object.annex.type 
       when 1 
        i object.annex.text 
       when 2 
        b object.annex.text 
       when 3 
        span(class='normal') object.annex.text 
     else 
      case object.type 
       when 1 
        i object.text 
       when 2 
        b object.text 
       when 3 
        span(class='normal') object.text

출처

2014-11-19 Anonymous

옥보기 파셜가 하나 또는 그 이상으로 일반적인 마크 업을 당겨 고려 지원합니다.

출처

2014-11-19 14:34:06 Paul

내가 해결해 주시면 고맙겠습니다. 폴! –

감사합니다. 나는 부분 변수가 부모 변수와 함께 "이 방법으로"작동 할 수 있음을 깨닫지 못했습니다. 단순히 파일을 논리로 작성하고 부분적으로 만 호출하여 dust.js로 작성했지만 간소화 된 코드는 내 자신의 답변에 게시합니다. 문제. –

dust.js와 같이 작성했습니다.

<div class='frame red'> 

    {#array} 

    {#annex} 

     {>"partials/object"/} 
    {/annex} 

    {>"partials/object"/} 
    {/array} 

</div> 

<div class='frame blue'> 

    {#array} 

    {#annex} 

     {>"partials/object"/} 
    {/annex} 

    {>"partials/object"/} 
    {/array} 

</div>

논리는 partials/object.dust;

{@select key=type} 

    {@eq value=1} 
    <i>{text}</i> 
    [/eq} 

    {@eq value=2} 
    <b>{text}</b> 
    {/eq} 

    {@default} // when type is null 
    <span>{text}{?isAnnex}, annex.{/isAnnex}</span> 
    {/default} 

{/select}

출처

2014-11-20 17:45:14

템플릿 코드 리던던시 피하기

답변

관련 문제