Meteor - 在助手、事件和模板之间传递数据答案

【问题标题】：Meteor - Passing data between helpers, events and templatesMeteor - 在助手、事件和模板之间传递数据
【发布时间】：2016-08-24 01:00:36
【问题描述】：

我不确定如何解决我的问题。我是否应该将我的事件中的变量设置为我的模板中的空格键语法字段，或者以某种方式将我返回的事件数据传递给我的助手。一切都已正确发布和订阅。

问题：我正在尝试使用户可以单击目录列表（DirectoryList 集合）中任何人旁边的“添加”按钮，并将用户信息添加到联系人列表集合中。它只是一个消息应用程序，人们可以在其中滚动每个人的目录并将用户添加到他们的联系人列表中。这是我的文件：

模板> directoryList.html

<template name="directoryList">
    {{> searchDirectory}}
    <ul>
        {{#each directoryList}}
            <li>
                {{firstname}} {{lastname}} &nbsp; <button name="addFriend" id="addFriend">Add</button>
            </li>
        {{/each}}
    </ul>
</template>

helpers>directoryList.js

Template.directoryList.helpers({

    'directoryList': function(){
        return DirectoryList.find({}, {sort: {createdAt: -1}});
    }

});

事件>directoryList.js

Template.directoryList.events({

  'click .addFriend': function(event){
        event.preventDefault();

        var currentUserId = Meteor.userId();
        var currentContact = DirectoryList.findOne(this._id);
        var currentContactFirstname = currentContact.firstname;
        var currentContactLastname = currentContact.lastname;
        var currentContactEmail = currentContact.email;
        console.log("test");

        ContactsList.insert({
            firstname: currentContactFirstname,
            lastname: currentContactLastname,
            email: currentContactEmail,
            createdBy: currentUserId
        });
    }
});

它显然在我的事件中向我抛出了 {{}} 语法错误，但我不知道还能做什么或如何让它工作。认为它可能能够从模板继承这些字段，但我猜不是？

【问题讨论】：

当您直接指出问题时，问题更容易回答。哪一行抛出错误，以及打印到控制台的内容是什么？另外，currentContact 是否被正确获取？
我很抱歉。它没有在控制台或命令提示符中显示任何错误，基本上只是一个简单的按钮被单击，什么都不做。并且没有任何内容被打印到控制台。我将 console.log("test") 作为测试打印，但它没有被打印。就 currentContact 我假定而言。我有一个名为 DirectoryList 的集合，已发布和订阅

标签： javascript templates events meteor helpers

【解决方案1】：

您的事件处理程序适用于 addButton 类，其中您的按钮没有 addButton 类。您需要在模板中将 id 更改为 class。

<template name="directoryList">
    {{> searchDirectory}}
    <ul>
        {{#each directoryList}}
            <li>
                {{firstname}} {{lastname}} &nbsp; <button name="addFriend" class="addFriend">Add</button> <!-- CHANGED ID TO CLASS FOR THIS BUTTON -->
            </li>
        {{/each}}
    </ul>
</template>

您可以按照其他答案来避免不必要的查询以提高性能。

希望对你有帮助。

【讨论】：

你是最棒的！如此简单的错误，它解决了一切。被困在这几天了。谢谢谢谢

【解决方案2】：

在您的事件处理程序this 中已包含当前联系人，您无需再次查找。您可以将事件处理程序简化为：

Template.directoryList.events({

  'click .addFriend': function(event){
        event.preventDefault();
        console.log(this);

        ContactsList.insert({
            firstname: this.firstname,
            lastname: this.lastname,
            email: this.mail,
            createdBy: Meteor.userId()
        });
    }
});

【讨论】：