IT Share you

Handlebars.js는 [Object object] 대신 객체를 구문 분석합니다.

shareyou 2020. 11. 16. 23:11
반응형

Handlebars.js는 [Object object] 대신 객체를 구문 분석합니다.


Handlebars 템플릿을 사용하고 있으며 JSON 데이터가 이미 [Object object]에 표시되어 있습니다. Handlebars 외부에서이 데이터를 구문 분석하려면 어떻게해야합니까? 예를 들어 핸들 바 태그를 통해 페이지에 JavaScript 변수를 채우려 고하는데 작동하지 않습니다.

어떤 제안? 감사합니다!

편집하다:

명확히하기 위해, 템플릿에 핸들 바가있는 ExpressJS를 사용하고 있습니다. 내 경로에는 다음이 있습니다.

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

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

그런 다음 index.hbs 템플릿에 이제 {{user}}개체가 있습니다. {{#each}}객체를 잘 반복 하는 사용할 수 있습니다 . 그러나 나는 또한 Backbonejs를 사용하고 있으며 다음과 같이이 데이터를 View에 전달하고 싶습니다.

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

문제는 console.log에 넣으면 'Unexpected Identifier'라는 오류가 발생하면 소스에 {{user}}단순히 표시 된다는 [Object object]것입니다.


출력 할 때 {{user}}Handlebars는 먼저 user.toString()값을 검색합니다 . plain Object의 경우 기본 결과는 현재"[object Object]" 보고있는 것입니다.

더 유용한 것을 얻으려면 객체의 특정 속성을 표시 할 수 있습니다.

{{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를 통해 컨텍스트 (주소록 등)를 추가합니다. 그런 다음 클라이언트 측 컨텍스트 변수를 다음과 같이 저장할 수 있습니다.

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

( Jim Liu가 지적한대로) 트리플 컬리에 주목하세요 .


{{ }}유효하지 않은 JSON 개체 내에서 템플릿 구문을 전달하려고 합니다.

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

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

참고 URL : https://stackoverflow.com/questions/10232574/handlebars-js-parse-object-instead-of-object-object

반응형