Javascript 访问对象'；在Blaze模板中创建属性名称_Javascript_Html_Templates_Meteor_Meteor Blaze

Javascript 访问对象'；在Blaze模板中创建属性名称

javascript html templates meteor

Javascript 访问对象'；在Blaze模板中创建属性名称,javascript,html,templates,meteor,meteor-blaze,Javascript,Html,Templates,Meteor,Meteor Blaze,假设我有一个如下所示的助手： Template.profile.helpers({ info: { Name: 'Bob Dinkleberg', Age: 45, Location: 'Earth, Milky Way' } }); 我想将此信息放入中。下面是一些伪代码： <template name="profile> <ul> {{#each}} <li> {{key}}: {{property}

假设我有一个如下所示的助手：

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

我想将此信息放入

中。下面是一些伪代码：

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

这将很有帮助：

您想使用{{{with}}

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

我个人喜欢养成习惯，将助手的名称映射到一个返回某些内容的函数
Template.profile.helpers({

  info: function(){

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

  }

});

编辑
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}}

如果要按要求循环对象属性和值，可以通过以下方式执行：
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] };
  }
});

用这个模板
<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>


属性循环

{{>内容}

{{{#每个键}
{{>属性键\值\对}
{{/每个}}
{{key}}:{{value}

我为您准备了这个流星板，这是一个运行示例：

干杯，
汤姆
注意：如果对象的值从未更改，则无需将其创建为ReactiveVar。但是，当对象内容发生变化时，作为一个ReactiveVar进行操作，表单将以反应方式更新。
有没有办法通过编程方式访问对象的属性名称？（我不想在我的标记中实际写入“Name，Location…”。我宁愿迭代对象并获取键。）现在，我们可以假设我不关心顺序。你可以迭代数组，因为数组保持顺序。对一个对象进行迭代有点奇怪，因为不能保证顺序-值可能在每个循环中以不同的顺序显示。但是，如果必须这样做，这是一个开放的问题，基本上可以通过将对象转换为数组来解决：使用该解决方案，您能给我一个如何访问嵌套数组中各个元素的示例吗？如果我在助手中返回{u pairs（object）
，并在{{each}}
块中访问{{this}}
，我会得到当前数组，但是如果我访问{this[0]}
，出于某种原因，我仍然会得到相同的数组。更新了我的答案。我没有使用\u.pairs，因为我不知道如何使用空格键访问特定的数组索引。
<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>