如何使用 JsRender 渲染 JSON 对象的属性名称？答案

【问题标题】：How to render property name of JSON object with JsRender?如何使用 JsRender 渲染 JSON 对象的属性名称？
【发布时间】：2013-06-07 06:50:10
【问题描述】：

我有一个带有动态属性名称的 JSON 对象。如何使用 JsRender 呈现属性名称？我一直在查看 JsRender 演示页面中的示例，但找不到这样做的方法。

例子：

{
    'prop1': '123',
    'prop2': '456'
}

预期输出：

1. prop1 = 123
2. prop3 = 456

JsFiddle：http://jsfiddle.net/kvuZC/

更新工作 JsFiddle：http://jsfiddle.net/B76WP/

【问题讨论】：

标签： jsrender

【解决方案1】：

您可以使用助手遍历字段

$.views.helpers({
    getFields: function( object ) {
        var key, value,
            fieldsArray = [];
        for ( key in object ) {
            if ( object.hasOwnProperty( key )) {
                value = object[ key ];
                // For each property/field add an object to the array, with key and value
                fieldsArray.push({
                    key: key,
                    value: value
                });
            }
        }
        // Return the array, to be rendered using {{for ~fields(object)}}
        return fieldsArray;
    }
});

来自'Iterating through fields' scenario的代码

{{for ~getFields(details)}}
   <b>{{>key}}</b>: {{>value}}
{{/for}}

【讨论】：

关于如何设置帮助程序的良好且有用的解释，但由于 props 已被添加到 jsRender，这个特殊用例现在已过时。请参阅 Alex 的回答，了解现代方法。

【解决方案2】：

检查{{props}}标签，这对解决这个问题非常有用。 https://www.jsviews.com/#propstag

{{props}}
    1. {{>key}} = {{>prop}}
{{/props}}

并且输出将是所需的。

【讨论】：

【解决方案3】：

改变方法。将您的对象映射到将保存您的键和值的对象数组中。

这是应该这样做的代码：

var jsonData = {
    'prop1': '123',
    'prop2': '456'
}
, data = $.map(jsonData, function(value, key) {return {value: value, key: key}});

$('#container').html($('#dynamicObjectTemplate').render(data));

这将创建以下内容：

[{
  value: '123',
  key: 'prop1'
},{
  value: '456',
  key: 'prop2'
}]

这是jsfiddle 上的工作示例（无法通过引用包含 jsrender 代码，所以我将其粘贴...您的代码在底部）

【讨论】：