Mustache.js - 특정 div 테이블을 업데이트하지 않습니다.

Question

html 페이지의 테이블 렌더링에 Mustache.js를 사용하고 있습니다. 테이블에 대한 렌더링 템플릿이 있습니다. json 배열에서 뷰 데이터를 가져와 테이블을 렌더링합니다. arrary에 5 개의 객체가 있으면 html 페이지에 5 개의 테이블이 생성됩니다. 이제 특정 테이블을 렌더링하지 않아도됩니다. 예를 들어, table1 및 table3 만 렌더링하려고합니다. json에서 다른 테이블 값을 제거하면 UI에서 제거됩니다. 하지만 모든 테이블을 유지하면서 두 테이블 만 업데이트하려고합니다. 어떻게 이것을 수행할까요?

감사합니다.

Answer 1

mustache.js는 logic-less 템플릿 시스템으로 설계되었으므로 여기 해결책이 이상적이라고 생각하지 않습니다. 그러나 나는 이런 논리를 수시로 콧수염과 함께 퍼지기 때문에 그렇게한다.

템플릿을 렌더링하기 전에 배열의 각 객체에 다른 속성을 추가하거나 복제하여 템플릿 전용 속성을 추가하는 것이 좋습니다.

var myArray = [ 
    {myProp: 1, showTable: false}, 
    {myProp: 2, showTable: true}, 
    {myProp: 3, showTable: false}, 
    {myProp: 4, showTable: true}, 
    {myProp: 5, showTable: false} 
]; 

당신은 할 수 있습니다

var myArray = [ 
    {myProp: 1}, 
    {myProp: 2}, 
    {myProp: 3}, 
    {myProp: 4}, 
    {myProp: 5} 
]; 

for (var i = 0; i < myArray.length; i++) { 
    myArray[i].showTable = i % 2 === 0; 
} 

이제에서 myArray 변수는 다음과 같이 좋아한다 : 그래서, 당신이 배열의 다섯 개체가 만 짝수 것들에 대한 테이블을 작성한다고 가정하자 이제 콧수염에있는 "#"연산자를 통해 showTable 속성을 활용하십시오. "#"을 먼저 사용하여 배열을 반복 한 다음 "루프"내부에서 showTable 속성의 진리 값을 확인할 수 있습니다.

Mustache.render($('#MyTemplate').html(), { TableArray: myArray }); 

을 그리고, 템플릿 자체를 : 첫째, 여기에 호출 TableArray 우리의에서 myArray 변수를 전달 템플릿에서 HTML을 생성하는 Mustache.render에의

<script id="MyTemplate" type="text/template> 
    {{#TableArray}} <!--Iterates through array--> 
    {{#showTable}} <!--Only creates HTML inside if showTable property evaluates to true--> 
     <table>...</table> 
    {{/showTable}} 
    {{/TableArray}} 
</script>