2012-10-11 4 views
4

콧수염으로 여러 항목을 표시하려고하는데 쉼표 구분 기호로 표시하고 싶습니다. 여기 콧수염을 사용하여 글루/조인과 결합하기 JS

내 객체입니다

{"items": [ 
    {"display": "Item 1"}, 
    {"display": "Item 2"}, 
    {"display": "Item 3"}, 
    {"display": "Item 4"} 
]} 

그리고 여기 내 콧수염 JS 템플릿입니다 : 불행하게도

{{#items}}{{display}}, {{/items}} 

,이 같은 렌더링 :

Item 1, Item 2, Item 3, Item 4, 

내가 제거하고 싶습니다 마지막 ",", 그것은 이상한 시각적 인 것처럼 보였습니다.

나는 함수를 사용했지만 {{items}} "텍스트가 있는데 배열 items이 아닙니다.

어떻게하면됩니까?

도움 주셔서 감사합니다.

+0

나는 내 자신의 제안 된 답변과 비슷한 질문을 게시했습니다. [자세한 내용은이 게시물을 참조하십시오] (http://stackoverflow.com/questions/16287138/dynamic-tables-with-mustache-using-dynamic-arrays) –

답변

1

잘 해결할 수있는 두 가지 방법을 알고 있습니다. 먼저 자신 만의 반복기 도우미 (이것은 가장 좋은 해결책입니다)를 프로그래밍하고 sencond는 수동으로 (DOM 처리로) 후미 혼수 상태를 삭제하는 것입니다.

그냥 자바 스크립트 ($("selector").html())로 텍스트를 찾아서 슬라이스하십시오.

var html = jQuery("selector").html(); 
html = html.slice(0, html.length-1); 

그런 식으로 마지막 문자를 자릅니다.

4

콧수염 기능을 사용할 수 있습니다. 이들은 다른 섹션과 마찬가지로 템플릿에 정의 된 다음 래핑 된 내용에 따라 실행됩니다. 귀하의 케이스의 경우는 다음과 같이 보일 것입니다 :

{ 
    "items": [ 
    {"display": "Item 1"}, 
    {"display": "Item 2"}, 
    {"display": "Item 3"}, 
    {"display": "Item 4"} 
    ], 
    "trim": function() { 
    return function (text, render) { 
     return render(text).replace(/(,\s*$)/g, ''); // trim trailing comma and whitespace 
    } 
    } 
} 

이 그런 다음 콧수염 마크 업이 다음과 같이 표시됩니다

{{#trim}}{{#items}}{{display}}, {{/items}}{{/trim}} 

그리고 당신의 출력은 당신이있어 무엇을 될 것입니다 후 :

Item 1, Item 2, Item 3, Item 4 

jsfiddle에서 확인하십시오.

관련 문제