Handlebars.js doesn't handle JSON's unicode keys
See : http://stackoverflow.com/questions/14661526/handlebars-js-json-and-unicode-characters-key-workaround
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.2/handlebars.min.js"></script>
div {background: #CCC; } are formerly empty, then filled using 3 exactly similar Handlebar.js script. Only the data called change, with 3 tests: <br />1. aphabetic key-alphabetic values, <br />2. alphabetickey-CJK values, and <br />3. CJK_unicode_key-CJK_values called from the JSON.<br />When Handlebar.js works, the div contains a green text.<br /><br /><br />
1. {{title}} <span>(Alpha key, Alpha val)</span>: <div id="container1"></div>
<br />
2. "{{bla.key}}" test <span>(Alphanum key > CJK-Alphanum value)</span>: <div id="container2"></div>
<br /><br />
3. "{{口.key}}" test <span>(CJK key > CJK-Alphanum value)</span>: <div id="container3"></div>(no green text = fails. Shouldn't.)<br />(Note: Mustache.js works fine.)
CSS
* { color: green; font-size: 0.8em}
div { border: 1px solid #666; padding: 5px; background: #CCC; }
span {color: #666; margin-left: 3em; }
JavaScript
var jsonDictSample = {
title: "My first word!",
alpha: {
zht: "alphabetic root-口-我是個帥哥",
pyn: "alphabetic root-kou3",
dfn: "alphabetic root-mouth"
},
口: {
zht: "CJK root- 口-我是個帥哥",
pyn: "CJK root-kou3",
dfn: "CJK root-mouth"
},
}
var source1 = '<p>{{title}}</p>';
var template = Handlebars.compile(source1);
var html = template(jsonDictSample);
$('#container1')
.append(html);
var source2 = '<p>{{title}}<br />/{{alpha.zht}}}<br />/{{alpha.pyn}} <br />/{{alpha.dfn}}</p>';
var template = Handlebars.compile(source2);
var html = template(jsonDictSample);
$('#container2')
.append(html);
var source3 = '<p>{{title}}<br />/{{口.zht}}}<br />/{{口.pyn}} <br />/ {{口.dfn}}</p>';
var template = Handlebars.compile(source3);
var html = template(jsonDictSample);
$('#container3')
.append(html);