Mustache.js - отображать ключ вместо значения - PullRequest
Новая
       14

Mustache.js - отображать ключ вместо значения

6 голосов
/ 22 января 2012

Я использую эти данные здесь: http://pastie.org/3231052 - Как я могу отобразить ключ вместо значения, используя Усы или Рули? 

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

Ответы [ 2 ]

1 голос
/ 27 августа 2013

Я изменил предыдущий ответ, используя Handlebars для обработки пары ключ-значение объектов.Это так же просто, как просто сделать следующее: 

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

Я положил пример на Fiddle, надеюсь, он кому-нибудь поможет.Обратите внимание, что эта реализация зависит от добавления атрибутов Handlebars

.

.
1 голос
/ 22 января 2012

Если вы хотите отобразить пары ключ-значение, вы можете написать помощника в 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>

РЕДАКТИРОВАТЬ

Похоже, это не совсем то, что вы хотите, но можно придуматьпомощник, который сделает свое дело.

...