Есть ли способ перебрать карту с Handlebars.js?

Question

С помощью Handlebars.js легко итерировать массив, например:

{{#each comments}}
<div class="comment">
  <h2>{{title}}</h2>
  {{{{url}}}
</div>
{{/each}}

и массив вроде:

{
  comments: [
   { url: "http://www.yehudakatz.com", title: "Katz Got Your Tongue" },
   { url: "http://www.sproutcore.com/block", title: "SproutCore Blog" }, 
  ]
}

Но я не нахожу метод для итерации карты, такой как:

{
  headers: { 
     "Host": "www.example.com", 
     "Location": "http://www.example.com",

     ... Much more map items ... 
  }
}

Есть ли способ перебора карты с помощью Handlebars.js? Или я должен реструктурировать объект как:

{
  headers: [
   { key: "Host", value: "www.example.com" },
   { key: "Location", value: "http://www.example.com" }, 
  ]
}

Answer 1

Это теперь поддерживается с:

{{#each headers}}
    Key: {{@key}}, Value: {{this}}
{{/each}}

Answer 2

Ответ выше находится на правильном пути, это мое уточнение:

Handlebars.registerHelper( 'eachInMap', function ( map, block ) {
   var out = '';
   Object.keys( map ).map(function( prop ) {
      out += block.fn( {key: prop, value: map[ prop ]} );
   });
   return out;
} );

И использовать его:

{{#eachInMap myMap}}
key:{{key}} value: {{value}}
{{/eachInMap}}

Answer 3

все, что вам нужно сделать, это зарегистрировать помощника следующим образом:

Handlebars.registerHelper( 'eachInMap', function ( map, block ) {
   Object.keys( myObj ).map(function( prop ) {
       return block( myObj[ prop ] );
   });
} );

в вашем шаблоне вы можете назвать это:

{{#eachInMap mapObject}}
some HTML and other stuff
{{/eachInMap}}

и все.Надеюсь, что это пригодится

Answer 4

Последние версии Handlebars.js поддерживают более читаемый формат итерации. (см. здесь ):

{{#each object as |value key|}}
    {{key}} => {{value}}
{{/each}}

На мой взгляд, это менее удивительно, чем введение синтаксиса @key, как это предлагается в ответе Тасоса Зервоса.

Answer 5

В случае, если кто-то попал на этот вопрос во время поиска в Google пути к итерации ES6 Map в руле , вот помощник:

Handlebars.registerHelper('eachInMap', (map, block) => {
  let output = '';

  for (const [ key, value ] of map) {
    output += block.fn({ key, value });
  }

  return output;
});

Пример, демонстрирующийMap инициализация и итерация:

const map = new Map([['name', 'Nicholas'], ['age': 25]]);

ES6 Map образец инициализации из Понимание книги ECMAScript 6 Николаса С. Закаса.

Используйте новый помощник в своем шаблоне Handlebars.js:

{{#eachInMap map}}
  key: {{ key }}, value: {{ value }}
{{/eachInMap}}

Теперь все готово для перебора нативной ES6 Map в Handlebars‌ !

Answer 6

Более полный пример для использования с Map () - со вспомогательными функциями, взятыми из рулей, - которые позволят работать блочным переменным внутри каждого элемента управления.

    function appendContextPath(contextPath, id) {
      return (contextPath ? contextPath + '.' : '') + id;
    }

    function blockParams(params, ids) {
      params.path = ids;
      return params;
    }

    Handlebars.registerHelper('eachOfMap', function (map, options) {
      let contextPath;
      if (options.data && options.ids) {
        contextPath = appendContextPath(options.data.contextPath, options.ids[0]) + '.';
      }

      let data = Handlebars.createFrame(options.data);

      var out = '';
      for (let [key, item] of map) {
        data.key = key;
        if (contextPath) {
          data.contextPath = contextPath+key;
        }
        // out += block.fn({"key": key, "value": item});
        out = out + options.fn(item, {
          data: item,
          blockParams: blockParams([item, key], [contextPath + key, null])
        });
      }
      return out;
    })

Использование:

    let dataAsMap = new Map([["keyOne", {name: "bob", age: 99}], ["keyTwo", {name: "alice", age: 99}]]);

    {{#eachOfMap (dataAsMap)}}
      <li>
        {{> "fragments/childTemplate"}}
      </li>
    {{/eachInMap}}

    <span>Hey {{name}}, you're {{age}} years </span>