[객체] 대신 Handlebars.js가 오브젝트 데이터를 렌더링해야 합니다.

[객체] 대신 Handlebars.js가 오브젝트 데이터를 렌더링해야 합니다.

핸들바 템플릿을 사용하고 있는데 JSON 데이터는 이미 [Object]에 표시되어 있습니다.핸들바 외부에서 이 데이터를 해석하려면 어떻게 해야 합니까?예를 들어 핸들바 태그를 사용하여 페이지 상의 JavaScript 변수를 입력하려고 하는데, 이것이 작동하지 않습니다.

좋은 의견이라도 있나?감사해요!

편집:

명확히 하기 위해 Express를 사용하고 있습니다.JS(템플릿용 핸들 바 포함)제 경로에는 다음과 같은 것이 있습니다.

var user = {}
user = {'id' : 123, 'name' : 'First Name'}

res.render('index', {user : user});

그러면 내 index.hbs 템플릿에{{user}}물건.사용할 수 있습니다.{{#each}}그 물체를 통해 잘 반복할 수 있습니다.그러나 Backbonejs도 사용하고 있으며 다음과 같은 데이터를 View에 전달하고 싶습니다.

myView = new myView({
   user : {{user}}
});

문제는 말이다{{user}}간단히 나타내다[Object object]소스에 있습니다.console.log에 넣으면 '예상하지 않은 식별자'라는 오류가 나타납니다.

출력 시{{user}}, 핸들바는 먼저,user의.toString()value. 플레인용Objects. 기본 결과는 현재 표시된 결과입니다.

보다 유용한 정보를 얻으려면 개체의 특정 속성을 표시할 수 있습니다.

{{user.id}}
{{user.name}}

또는 도우미를 사용하여 개체 형식을 다르게 정의할 수 있습니다.

Handlebars.registerHelper('json', function(context) {
    return JSON.stringify(context);
});

myView = new myView({
    user : {{{json user}}} // note triple brackets to disable HTML encoding
});

JSON을 간단하게 문자열화할 수 있습니다.

var user = {}
user = {'id' : 123, 'name' : 'First Name'};
// for print
user.stringify = JSON.stringify(user);

그런 다음 템플릿에서 다음을 통해 인쇄:

{{{user.stringify}}};

node-js에서 서버측 템플릿을 사용하고 있습니다만, 이것은 클라이언트측에서도 적용될 수 있습니다.Jonathan의 json 도우미를 노드에 등록했습니다.핸들러에서 res.locals를 통해 컨텍스트(AddressBook 등)를 추가합니다.다음으로 컨텍스트 변수 클라이언트 측을 다음과 같이 저장할 수 있습니다.

<script>
  {{#if addressBook}}
  console.log("addressBook:", {{{json addressBook}}});
  window.addressBook = {{{json addressBook}}};
  {{/if}}
</script>

(Jim Liu가 지적한 바와 같이) 트리플 컬리에 주목합니다.

템플릿 구문을 통과하려고 합니다.{{ }}유효하지 않은 JSON 객체 내에 있습니다.

대신 이 작업을 수행해야 할 수 있습니다.

myView = new myView({ user : user });

노드 라우터 - 응답 개체를 문자열화합니다.아래 행을 참조하십시오.

 response.render("view", {responseObject:JSON.stringify(object)});

HTML 스크립트 태그 - 사용자 템플릿 리터럴(템플릿 문자열)에서 JSON.parse를 사용합니다.

const json= `{{{responseObject}}}`;
const str = JSON.parse(json);

마법처럼 작동했어!

핸들바 템플릿에서 목록 또는 객체의 키/값을 다음과 같이 렌더링할 수 있습니다.

{{#each the_object}}
  {{@key}}: {{this}}
{{/each}}

출력 포맷을 보다 상세하게 제어하고 싶은 경우는, 독자적인 헬퍼를 작성할 수 있습니다.이것은 중첩된 객체를 통과하는 재귀 함수를 가지고 있습니다.

  Handlebars.registerHelper('objToList', function(context) {
    function toList(obj, indent) {
      var res=""
      for (var k in obj) { 
          if (obj[k] instanceof Object) {
              res=res+k+"\n"+toList(obj[k], ("   " + indent)) ;
          }
          else{
              res=res+indent+k+" : "+obj[k]+"\n";
          }
      }
      return res;
    }    
    return toList(context,"");
  });

이메일 템플릿에 핸들 바를 사용하여 다음과 같은 사용자에게 유용함을 확인했습니다.

{
  "user": {
    "id": 123,
    "name": "First Name",
    "account": {
      "bank": "Wells Fargo",
      "sort code": " 123-456"
    }
  }
}

가장 도움이 되는 답변을 요약하자면...

:handlebars(신용):

Handlebars.registerHelper("json", function (context) {
    return JSON.stringify(context);
});

:express-handlebars(credit 및 나는 최신 규칙을 업데이트했다):

app.engine(
    "handlebars",
    exphbs.engine({
        defaultLayout: "main",
        helpers: {
            json: function (context) { 
                return JSON.stringify(context);
            }
        }
    })
);

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★:{{json example}}

@sajjad에서 답변을 개선했습니다.

pre' 태그를 추가하면 훨씬 더 멋있어 보일 것입니다.

<pre>
  {{#each the_object}}
    {{@key}}: {{this}}
  {{/each}}
</pre>

언급URL : https://stackoverflow.com/questions/10232574/need-handlebars-js-to-render-object-data-instead-of-object-object