Question

对于我正在制作的游戏，我有一系列像这样的对象（请忽略愚蠢的效果/结果）：

issues = [
{
    uid: 1,
    question: "Should Marijuana be legalized?",
    options: [
        {
            statment: "Yes Please, It is better than alcohol",
            result: "Smokes fill up the skies",
            effect: {
                goldBonus: 0.2,
                Spirituality: 1,
                offenseBonus: -0.5,
                counterIntelBonus: -0.2
            }
        },  
        {
            statment: "No it is against the civilized society",
            result: "Jails are full of blazed teens",
            effect: {
                goldBonus: -0.2,
                Spirituality: -1,
                counterIntelBonus: +2
            }
        }   
    ] 
},
{
    uid: 2,
    question: "Should children be banned from playing in the streets?",
    options: [
        {
            statment: "Yes, they are pests",
            result: "clean efficient traffic free roads",
            effect: {
                goldBonus: 1,
                ironBonus: 1,
                populationBonus: -0.2,
                HDI: -0.5
            }
        },  
        {
            statment: "No, children should be free to play wherever they want",
            result: "Roads are full of kids running around playing",
            effect: {
                goldBonus: -0.2,
                HDI: 2
            }   
        },
        {
            statment: "Drivers get paid to kidnap kids on roads and deliver to army",
            result: "No kids are found outside their house in the fear of being snatched up by the govt.", 
            effect: {
                goldBonus: 0.5,
                populationBonus: -2,
                offenseBonus: 3,
                defenseBonus: 3,
                HDI: -5
            }   
        }
    ]       
},
]

基于这个数组，我正在尝试为issues数组中的每个问题创建一个单选按钮表单。辅助函数如下：

Template.HomePrivateIssues.helpers ({

  issues: function () {
    return issues;
  }

});

模板是：

<template name = "HomePrivateIssues">
    <div class = "issue">
        {{#each issues}}
            <form>
                <div class = "question">{{question}}</div>
                {{#each options}}
                    <input type = "radio" name = "test" value = "{{this.statement}}" > {{this.statment}} <br>
                {{/each}}
                <input type = "submit">
            </form>
        {{/each}}   
    </div>
</template>

我在定义表单的名称和值时遇到了问题简单的name = {{this.uid}}或name = "{{this.uid}}"似乎不起作用。

如果我保持名称或值不变（例如：name =＆＃34; test＆＃34; value =＆＃34; obama＆＃34;），我可以简单地使用..

Template.HomePrivateIssues.events({
  'submit': function(event, template) {
    var element = template.find('input:radio[name=test]:checked');
    console.log($(element).val());
  }
});

我在我的控制台中获得了obama。我对如何动态生成值和名称感到茫然，并在提交表单时将其传递给事件。

Answer 1

好的，首先让我们改变html。

<div class = "issue">
    {{#each issues}}
            <div class = "question">{{question}}</div>
            {{#each options}}
            <form>
                <input type="radio" name="test" value="{{this.statment}}">{{this.statment}}
            {{/each}}
            <button id="lol"> Click </button> <!-- i preffer to work with button change to input if you want -->
        </form>
    {{/each}}   
</div>

我们在{{#each options}}

中添加一个表单

现在我们需要改变一点event函数

  Template.HomePrivateIssues.events({
  'click #lol': function(event, template) {
    event.preventDefault();
    var value = $(":radio[name=test]:checked").val();
    console.log(value)
  }
});

此处我们只需添加event.preventDefault(); here，了解有关preventDefault();的更多信息。

尝试一下，它应该可行

使用流星中的把手创建动态单选按钮

1 个答案: