javascript - Acessar os nomes das propriedades de um objeto em um template Blaze

Diga que eu tenho um ajudante que se parece com isto:

Template.profile.helpers({
  info: {
    Name: 'Bob Dinkleberg',
    Age: 45,
    Location: 'Earth, Milky Way'
  }
});

Eu quero colocar essas informações em um <ul>. Aqui está algum pseudo-código:

<template name="profile>
  <ul>
    {{#each}}
      <li> {{key}}: {{property}} </li>
    {{/each}}
  </ul>
</template>

Perdoe-me se isso é trivial, sou novo no Meteor e Blaze, e não consegui encontrar uma solução online.

Resposta #1

Se você quiser percorrer as propriedades e valores de um objeto como você solicitou, você pode fazer isso de forma genérica assim:

Template.content.onCreated(function() {
  this.properties = new ReactiveVar({
    Name: 'Bob Dinkleberg',
    Age: 45,
    Location: 'Earth, Milky Way'
  });
});

Template.content.helpers({
  keys: function () {
    return Object.keys(Template.instance().properties.get());
  },
  key_value_pair: function() {
    return { key: this, value: Template.instance().properties.get()[this] };
  }
});

e com este modelo

<body>
  <h1>Property Loop</h1>
  <ul>
  {{> content}}
  </ul>
</body>

<template name="content">
  {{#each keys}}
    {{> property key_value_pair }}
  {{/each}}
</template>

<template name="property">
  <li>{{key}}: {{value}}</li>
</template>

Eu preparei este MeteorPad para você, que é um exemplo em execução:

http://meteorpad.com/pad/24MGwbuMNCcXCC7EW/PropertyLoop

Valeu, Tom

P.S.: Não é necessário criar o objeto como um ReactiveVar se seus valores nunca mudarem. Mas fazendo isso como um ReactiveVar, o formulário também é atualizado reativamente, quando o conteúdo do objeto mudar.

Resposta #2

Isso será útil:

http://meteorcapture.com/spacebars/

Você quer usar {{#with}}.

<template name="profile">
  <ul>
    {{#with info}}
      <li>{{Name}}</li>
      <li>{{Age}}</li>
      <li>{{Location}}</li>
    {{/with}}
  </ul>
</template>

Enquanto seu código auxiliar está correto:

Template.profile.helpers({
  info: {
    Name: 'Bob Dinkleberg',
    Age: 45,
    Location: 'Earth, Milky Way'
  }
});

Pessoalmente, gosto de criar o hábito de mapear o nome do ajudante para uma função que retorna algo.

Template.profile.helpers({

  info: function(){

    return {
      Name: 'Bob Dinkleberg',
      Age: 45,
      Location: 'Earth, Milky Way'
    };

  }

});

EDITAR

Template.content.helpers({

  info: function(){
    var obj = {
      Name: 'Bob Dinkleberg',
      Age: 45,
      Location: 'Earth, Milky Way'
    };
    var arrayOfObjects = [];

    // creating an array of objects
    for (key in obj){
      arrayOfObjects.push({key: key, value: obj[key]});
    };
    console.log("This is the array of objects: ", arrayOfObjects);
    return arrayOfObjects;
  },

});

HTML :

{{#each info}}
    {{value}}
{{/each}}