Mustache.js - 显示键而不是值

发布于 2024-12-28 19:26:43 字数 300 浏览 1 评论 0原文

我在这里使用这些数据： http://pastie.org/3231052 - 如何显示密钥而不是使用小胡子或车把的价值？

[{"interval":"2012-01-21",
  "advertiser":"Advertisers 1",
  "offer":"Life Insurance",
  "cost_type":"CPA",
  "revenue_type":"CPA",
  ... etc ...
}]

原文

I am using this data here: http://pastie.org/3231052 - How can I display the key instead of the value using Mustache or Handlebars?

[{"interval":"2012-01-21",
  "advertiser":"Advertisers 1",
  "offer":"Life Insurance",
  "cost_type":"CPA",
  "revenue_type":"CPA",
  ... etc ...
}]

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

哭泣的笑容 2025-01-04 19:26:43

如果你想显示键值对，你可以在Handlebars中编写一个helper。

Handlebars.registerHelper('eachkeys', function(context, options) {
  var fn = options.fn, inverse = options.inverse;
  var ret = "";

  var empty = true;
  for (key in context) { empty = false; break; }

  if (!empty) {
    for (key in context) {
        ret = ret + fn({ 'key': key, 'value': context[key]});
    }
  } else {
    ret = inverse(this);
  }
  return ret;
});

$(function() {
    var data = {"interval":"2012-01-21",
      "advertiser":"Advertisers 1",
      "offer":"Life Insurance",
      "cost_type":"CPA",
      "revenue_type":"CPA"};
                
    var source   = $("#template").html();
    var template = Handlebars.compile(source);
    $('#content').html(template({'data': data}));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta2/handlebars.min.js"></script>
<script id="template" type="text/x-handlebars-template">
    {{#eachkeys data}}
    <li>{{this.key}} - {{this.value}}</li>
    {{/eachkeys}}
</script>
<div id="content">
</div>

编辑

似乎这并不完全是你想要的，但有可能想出一个可以解决这个问题的助手。

If you want to display key-value pairs, you can write a helper in Handlebars.

Handlebars.registerHelper('eachkeys', function(context, options) {
  var fn = options.fn, inverse = options.inverse;
  var ret = "";

  var empty = true;
  for (key in context) { empty = false; break; }

  if (!empty) {
    for (key in context) {
        ret = ret + fn({ 'key': key, 'value': context[key]});
    }
  } else {
    ret = inverse(this);
  }
  return ret;
});

$(function() {
    var data = {"interval":"2012-01-21",
      "advertiser":"Advertisers 1",
      "offer":"Life Insurance",
      "cost_type":"CPA",
      "revenue_type":"CPA"};
                
    var source   = $("#template").html();
    var template = Handlebars.compile(source);
    $('#content').html(template({'data': data}));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta2/handlebars.min.js"></script>
<script id="template" type="text/x-handlebars-template">
    {{#eachkeys data}}
    <li>{{this.key}} - {{this.value}}</li>
    {{/eachkeys}}
</script>
<div id="content">
</div>

EDIT

Seems like this isn't quite what you want, but it's possible to come up with a helper that will do the trick.

回复收藏 0 原文

日记撕了你也走了 2025-01-04 19:26:43

我使用 Handlebars 修改了之前的响应来处理对象键值对。它就像执行以下操作一样简单：

<script id="template" type="text/x-handlebars-template">
    {{@entries}}
    <li>{{KEY}} - {{VALUE}}</li>
    {{/entries}}
</script>
<div id="content">
</div>

我在 Fiddle 上举了一个例子，希望它可以帮助那里的人。请注意，此实现取决于 Handlebars

Mustache 属性添加。

I modified the previous response using Handlebars to handle objects key value pair. It is as simple as just doing the following:

<script id="template" type="text/x-handlebars-template">
    {{@entries}}
    <li>{{KEY}} - {{VALUE}}</li>
    {{/entries}}
</script>
<div id="content">
</div>

I put an example on Fiddle, hope it helps someone out there. Please note this implementation depends on Handlebars

Mustache Attribute addition.

回复收藏 0 原文

~没有更多了~