如何将带空格键的 array/objects 传递给流星模板？

Question

我正在尝试构建一个流星模板来简化在表单上创建单选按钮的过程。我希望能够通过空格键将数组或对象作为参数传递给模板。我怎样才能将 array/object 作为参数传递，或者这甚至可能吗？

模板：

<template name="radioButton">
  <div class="mdl-textfield mdl-js-textfield">{{radioLabel}}</div>
  {{#each getRadioOptions}}
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="{{radioOptionID}}">
    <input type="radio" id="{{radioOptionID}}" class="mdl-radio__button" name="{{radioID}}" value="{{optionID}}">
    <span class="mdl-radio__label">{{optionLabel}}</span>
  </label>
  {{/each}}
</template>

模板助手：

Template.radioButton.helpers({
    getRadioOptions: function () {
        console.log("getRadioOptions called");
        console.log(this);
        console.log(this.radioOptions);
        return this.radioOptions;
    },
    radioOptionID: function() {
        return this.radioID+"-"+this.optionID;
    }
});

尝试的空格键表示法：

{{> radioButton radioID="sampleID" radioLabel="Sample Radio Buttons"
    radioOptions=[{optionID:"option1",optionLabel:"Option One"},
                  {optionID:"option2",optionLabel:"Option Two"}] }}

在运行这个符号之后并查看浏览器控制台，我得到了这个：（这表明只有 null 被传递给 radioOptions）

getRadioOptions called
Object {radioID: "sampleID", radioLabel: "Sample Radio Buttons", radioOptions: null}
null

Answer 1

您不能在空格键中的#each 中传递对象。它必须是一个数组。这应该出现在您的控制台中。

因为Meteor有下划线，你经常传的是_.toArray( myObject ).

Answer 2

你几乎做对了，只是你不能将数据作为 javascript 数组提供，而是需要使用 JSON 字符串，即使用：

{{> radioButton radioID="sampleID" radioLabel="Sample Radio Buttons"
    radioOptions='[{"optionID":"option1", "optionLabel":"Option One"}, {"optionID":"option2","optionLabel":"Option Two"}]' }}

请注意，您还需要在字段名称周围使用引号，因为它是 JSON 而不是 javascript！

然后，在助手中，解析字符串：

    getRadioOptions: function () {
        console.log("getRadioOptions called");
        console.log(this.radioOptions);  // string
        return JSON.parse(this.radioOptions);  // array
    },

如何将带空格键的 array/objects 传递给流星模板？

How to pass an array/objects with spacebars to a meteor template?

templates

meteor

spacebars