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
'IT Share you' 카테고리의 다른 글
Rails에서 현재 날짜를 "mm / dd / yyyy"형식으로 표시하는 방법 (0) | 2020.11.16 |
---|---|
Excel 통합 문서가 이미 열려 있는지 감지 (0) | 2020.11.16 |
날짜 / 시간 범위에서 데이터 선택 (0) | 2020.11.16 |
데이터 프레임을 여러 데이터 프레임으로 분할 (0) | 2020.11.16 |
콘솔 애플리케이션에서 ELMAH 사용 (0) | 2020.11.16 |