Question

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

模板：

<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

你几乎把它弄好了，除了你不能把数据作为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
    },

Answer 2

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

由于Meteor包含下划线，因此您经常传递的是_.toArray( myObject )。

如何将带有空格键的数组/对象传递给流星模板？

2 个答案: