Handlebars.js는 앞쪽에 대괄호를 사용하지 않습니다.

Question

PHP 백엔드, Backbone.js 및 Handlebars.js를 사용하고 있습니다. 내 자바 스크립트 데이터 요청 및 JSON 데이터가 성공적으로 반환됩니다 (json_encode).

이 JSON 데이터를 핸들 막대 템플릿에 제공하면 표시되지 않습니다. JSON 객체의 앞뒤에있는 대괄호가 Handlebars.js에 의해 싫어되어 표시되지 않는다는 것을 깨달았습니다. 아래 코드를 살펴보십시오.

var ArticleListView = Backbone.View.extend(
{ 
    el: $('#main'), 
    render: function() 
    { 
    var template = Handlebars.compile($("#articles_hb").html()); 
    $(this.el).html(template([{"articles":[{"title" : "1"}, {"title" : "2"}]}])); 
    return this;  
    } 
}); 

이제 대괄호를 제거하면 올바르게 작동합니다. 무슨 일이야? 처음에 대괄호가있는 이유는 무엇입니까? 나는 어떻게 그들을 제거합니까?

Answer 1

Handlebars은 컨텍스트를 템플릿 값에 대한 간단한 조회 테이블로 사용하기 때문에 컨텍스트에 대한 개체를 원합니다. 따라서 배열 ([ ... ])이 아닌 template()에 객체 ({ ... })를 전달해야합니다.

누군가가 필요한 컨텍스트 개체를 포함하는 요소 배열 하나를 제공합니다. 어느 배열 래퍼없이 JSONified 객체 (PHP 측면에서 연관 배열)을 보내거나 이런 식으로 뭔가를 클라이언트 코드에서 배열을 제거하기 위해 JSON을 생산하는 PHP를 수정 :

$(this.el).html(template(context[0])); 

이있는 경우 문자 코드 :

$(this.el).html(template([{"articles":[{"title" : "1"}, {"title" : "2"}]}])); 

JavaScript 파일에 다음 코드를 생성하고 수정해야합니다. 백본보기에 포함 된 것과 같은 리터럴 데이터가 있다면 백본을 올바르게 사용하지 않는 것일 수 있습니다. 템플릿의 데이터는 백본 모델에서 가져온 것이어야합니다.

Backbone 모델에서 JSON을 얻는다면 toJSON이 자바 스크립트 객체를 제공해야하는 단일 모델보다는 toJSON을 콜렉션 (배열을 반환)에서 호출한다고 추측 할 수 있습니다.

Answer 2

컬렉션의 출력을 루프 처리하기 위해 Handlebars를 호출하는 것이 합리적입니다. 배열은 뷰에서 데이터를 처리하는 데있어 잘못된 디자인 결정이 아닙니다.

핸들 막대에는 숫자 또는 기호 식별자 처리를위한 특수 구문 인 as described here이 있습니다.

{{people.attributes.[0]}} // akin to people.attributes[0] 
{{people.attributes.[1]}} // akin to people.attributes[1] 

입력 : : 메일 : 그래서, 더 정확한 대답은 핸들 바는 다음과 같이 템플릿에 배열에 액세스 할 수 있습니다 [{헤더 : {제목 : [ "안녕하세요 달링", "... 또 다른"]}} , ...] more

<ul> 
    {{#each mails}} 
    <li>. 
     {{headers.subject.[0]}} 
    </li> 
    {{/each}} 
</ul>