서버 측 면도기보기와 클라이언트 측 jQuery 템플릿간에 중복 서식을 방지하십시오.

Question

MVC 면도기 뷰를 사용하여 특정 방식으로 서식이 지정된 항목 목록을 출력하는 검색 결과 페이지가 있습니다.

@for (int i = 0; i < group.Count(); i++) { 
    <div class="result"> 
    <div class="ordinal">@((i+1).ToString()).</div> 
    <div class="detail"><p>@group.ElementAt(i).Name</p></div> 
    </div> 
} 

클라이언트는 상기 원래의 장소에없는 결과를 렌더링 JSON 및 jQuery를 템플릿으로 새로운 데이터 세트를 가져 오지하는 jQuery를 AJAX를 사용하여 그 결과를 필터링 할 수있다. 이것은 jQuery를 템플릿입니다 :

var result = $("#resultTemplate").tmpl({ results: data }); 
$("#resultsColumn").empty().append(result); 

주 I는 서버 측 면도기 코드와 클라이언트 - 모두에서 검색 결과에 대한 서식 HTML을 복제했다 방법 : AJAX 호출 후 바인딩

<script id="resultTemplate" type="text/x-jquery-tmpl"> 
    {{each(i, result) results}} 
    <div class="result"> 
     <div class="ordinal">${i+1}.</div> 
     <div class="detail"><p>${name}</p></div> 
    </div> 
    {{/each}} 
</script> 

사이드 jQuery 코드. 변경해야 할 때 불일치 가능성을 줄이기 위해 하나의 데이터 바인딩 템플릿 만 사용하고 싶습니다.

읽기 Stephen Walter's Intro to jQuery Templates 그가 ASP.NET MVC에서 jQuery 템플릿을 사용할 때 그는 "더 좋은"통합을 암시하고 있으므로 위 시나리오를 해결하는 기능이 있는지 궁금합니다.

감사합니다.

Answer 1

중복 된 마크 업을 피하기 위해 @helper 구문을 사용할 수 있습니다.

@helper Result(string ordinal, string name) { 
    <div class="result"> 
     <div class="ordinal">@ordinal.</div> 
     <div class="detail"><p>@name</p></div> 
    </div> 
} 

그런 다음 면도기보기

@for (int i = 0; i < group.Count(); i++) { 
    @Result((i+1).ToString(), group.ElementAt(i).Name) 
} 

와 jQuery를 템플릿은 면도기보기 자체에있는 가정 년대 jQuery를 템플릿

<script id="resultTemplate" type="text/x-jquery-tmpl"> 
    {{each(i, result) results}} 
     @Result("${i+1}", "${name}") 
    {{/each}} 
</script> 

모두에 대해 도우미를 사용합니다.

단점이라면, 모든 인수를 문자열로 변환 한 다음 도우미로 전달해야한다는 것입니다. 그리고 어떤 이유로 든 "${i+1}"을 도우미에게 전달하는 것은 잘못된 것입니다.

아직 생산 방식에서 그런 접근 방식을 사용 하겠지만, 관련 마크 업의 복잡성에 달려 있다고 생각합니다.

Answer 2

면도기 구문을 사용하는 대신 동일한 jquery 템플릿으로 초기 검색 결과를 렌더링 할 수 있습니다. 이렇게하면 중복을 피할 수 있습니다. 당신은 볼에 넣고 수 :

<script type="text/javascript"> 
    $('#resultTemplate') 
    .tmpl(@group.ToJson())) 
    .appendTo("#resultTemplate"); 
</script> 

나는 그룹 개체에 ToJson 방법을했다. 그것은 당신이 viewmodel에 구현 한 메소드이거나 그룹 var이 콜렉션을 json으로 직렬화하기 위해 사용하는 것이 될 수 있습니다.