javascript handlebars中文 - Handlebars.js解析对象而不是



if判断 handlebars循环 (5)

我正在使用Handlebars模板并且JSON数据已经在[Object object]中表示,我如何在Handlebars之外解析这些数据? 例如,我试图通过把手标签在页面上填充JavaScript变量,但这不起作用。

有什么建议? 谢谢!

编辑:

为了澄清,我正在使用ExpressJS w / Handlebars进行模板化。 在我的路线中,我有这个:

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中我得到一个错误,'意外的标识符'。


Answers

您可以简单地将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 });


输出{{user}} ,Handlebars将首先检索user.toString()值。 对于普通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
});

这些例子可以证明不同方式之间的差异。 希望它能帮助您选择适合您需求的产品:

// Lets create object `a` using create function `A`
function A(){};
A.prototype.onProtDef=2;
A.prototype.onProtUndef=undefined;
var a=new A();
a.ownProp = 3;
a.ownPropUndef = undefined;

// Let's try different methods:

a.onProtDef; // 2
a.onProtUndef; // undefined
a.ownProp; // 3
a.ownPropUndef; // undefined
a.whatEver; // undefined
a.valueOf; // ƒ valueOf() { [native code] }

a.hasOwnProperty('onProtDef'); // false
a.hasOwnProperty('onProtUndef'); // false
a.hasOwnProperty('ownProp'); // true
a.hasOwnProperty('ownPropUndef'); // true
a.hasOwnProperty('whatEver'); // false
a.hasOwnProperty('valueOf'); // false

'onProtDef' in a; // true
'onProtUndef' in a; // true
'ownProp' in a; // true
'ownPropUndef' in a; // true
'whatEver' in a; // false
'valueOf' in a; // true (on the prototype chain - Object.valueOf)

Object.keys(a); // ["ownProp", "ownPropUndef"]




javascript json handlebars.js