属性名称未知的Mustache模板

Mustache template with unknown properties name

本文关键字：Mustache 模板 未知 属性      更新时间：2023-09-26

是否可以为具有未知属性的对象数组创建模板？

var objs: [{
  propA: 'A',
  propB: 'B',
  propC: 'A',
  propD: 'B'
}];

模板可以是：

<ul>
  <li>{{property_name}}: {{property_value}}</li>
</ul>

您首先应该以正确的方式定义对象数组：

var myarray=[{propA:'valueA'},{propB:'valueB'}]

然后通过索引或任何迭代方法引用每个对象

<ul>
  <li>{{Object.keys(myarray[0])}}:{{myarray[0]['propA']}}</li>
</ul>

以下内容可以让您了解如何获取密钥和值：

HTML

<script type="text/html" id="tmpl">
    {{#objs}}
         <div>
         {{key}}: {{value}}
        </div>
    {{/objs}}
</script>

JavaScript

$(document).ready(function () {
    var output = $("#output");
    var template = $("#tmpl").html();
    var objs = [{
        propA: 'A',
        propB: 'B',
        propC: 'C',
        propD: 'D'
    }];
    var mustacheFormattedData = {
        'objs': []
    };
    for (var prop in objs[0]) {
        if (objs[0].hasOwnProperty(prop)) {
            mustacheFormattedData['objs'].push({
                'key': prop,
                    'value': objs[0][prop]
            });
        }
    }
    var html = Mustache.render(template, mustacheFormattedData);
    output.append(html);
});

演示：http://jsfiddle.net/moogs/qK5NT/83/

相关文章：