Question

我正在使用Meteor创建一个允许用户在民意调查中创建和投票的网络应用程序。

目前我正在努力让用户能够对投票进行投票，但我没有运气。这是我目前的方法：

Template.PollParticipate.events({
    'click .vote': function(event) {

        event.preventDefault();

        var target = $(event.target);

        var pollID = $(this).parent('.poll-card').data('id');
        var voteID = $(this).data('id');

        var voteString = 'options.' + voteID + '.votes';
        var action = {};
        action[voteString] = 1;

        Polls.update(
            {_id: pollID},
            {$inc: action}
        );
    }
});

这是模板html：

<template name="PollParticipate">
    <div class="poll-card text-center" data-id="{{ _id }}">
        <h3>{{question}}</h3>
        <form>
            <div>
                {{#each options}}
                    <input type="radio" name="option" value={{option}} data-id="{{ _index }}">{{option}}
                {{/each}} 
            </div>
            <button type="submit" class="vote">Submit</button>
        </form>
    </div>
</template>

在这种情况下，当用户点击投票按钮时，该方法将查找父级的ID并将其存储在变量中。它还会尝试找到所选元素的索引（使用单选按钮）。然后传递，以便投票计数器更新一个。

遗憾的是没有发生这种情况。

可以找到整个项目的代码：https://github.com/smeloa/fcc-voting-app

谢谢！

Answer 1

在Meteor事件处理程序中，this是事件发生的数据上下文，而不是DOM元素，因此jQuery $(this)约定不起作用。（事件发生在提交按钮中，因此this是轮询对象。）这确实简化了问题 - 因为事件处理程序可以访问数据上下文，所以可以将轮询ID作为{{1无需数据属性。

如果您向事件处理程序添加第二个参数this._id：

template

然后"click .vote": function (event, template) { // ... }是jQuery template.$的一个版本，它只选择模板DOM中的元素。这样，您可以通过以下方式获取所选单选按钮：

然后，您可以使用jQuery方法来识别该选项。

您还希望使用方法进行投票，而不是直接从客户端进行数据库操作。现在，根据您当前的template.$("input:checked")规则，任何人都可以将每个选项的投票设置为他们想要的任何选项。

Meteor - 创建民意调查 - 数据库更新

1 个答案: