在 Blaze 模板中访问对象的属性名称答案

【问题标题】：Access an object's property names in a Blaze template在 Blaze 模板中访问对象的属性名称
【发布时间】：2015-09-22 02:38:39
【问题描述】：

假设我有一个看起来像这样的助手：

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

我想将此信息放入<ul>。这是一些伪代码：

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

如果这是微不足道的，请原谅我，我是 Meteor 和 Blaze 的新手，我一直无法在网上找到解决方案。

【问题讨论】：

标签： javascript html templates meteor meteor-blaze

【解决方案1】：

这会很有帮助：

http://meteorcapture.com/spacebars/

你想使用{{#with}}。

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

虽然您的帮助代码是正确的：

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

我个人喜欢养成将助手的名称映射到返回某些内容的函数的习惯。

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

【讨论】：

有没有办法以编程方式访问对象的属性名称？（我不想在我的标记中实际写“名称，位置......”。我宁愿只遍历对象并获取密钥。）现在，我们可以假设我不在乎关于订单。
您可以遍历数组，因为数组保持顺序。迭代一个对象有点奇怪，因为不能保证顺序 - 每个循环中的值可能以不同的顺序显示。但如果你必须这样做，这是一个悬而未决的问题，有一种解决方法，基本上是将对象转换为数组：github.com/meteor/meteor/issues/3884
使用该解决方法，您能给我一个示例，说明如何访问嵌套数组中的各个元素吗？如果我在助手中返回 _pairs(object) 并在 {{#each}} 块内访问 {{this}}，我会得到当前数组，但如果我访问 {{this[0]}}，由于某种原因，我仍然会得到相同的数组。
更新了我的答案。我没有使用_.pairs，因为我不知道如何使用空格键访问特定的数组索引。

【解决方案2】：

如果您想按您的要求遍历对象的属性和值，您可以通过以下方式进行通用：

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>

我为你准备了这个 MeteorPad，这是一个运行示例：

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

干杯，汤姆

P.S.：如果对象的值从不更改，则无需将对象创建为 ReactiveVar。但是通过将其作为 ReactiveVar 执行，当对象内容发生变化时，表单也会重新更新。

【讨论】：