流星模板事件，显示错误＆＃34;模板未定义＆＃34;

Question

我的代码如下：

test.html中的

<template name="main">
            <table class="table table-bordered table-striped table-condensed">
                <thead>
                    <tr>
                        <td>Name</td>
                        <td>City</td>
                        <td>Email</td>
                    </tr>   
                </thead>
                <tbody>
                    {{#each users}}
                    <tr>
                        <td>{{names}}</td>
                        <td>{{city}}</td>
                        <td>{{email}}</td>
                    </tr>
                    {{/each}}
                    <tr>
                        <td><input type="text" name="names" id="names" value=""></td>
                        <td><input type="text" name="city" id="city" value=""></td>
                        <td><input type="text" name="email" id="email" value=""></td>
                    </tr>
                </tbody>    
            </table>
     <button class="btn" id="add">Add</button>
</template>

在test.js

中

UserInfo = new Meteor.Collection('users');
if (Meteor.isClient) {
  Template.main.users=function() {
    return UserInfo.find();
  }
}
 Template.main.events({
    'click #add': function () {
      var names = $('#names').val();
      var city = $('#city').val();
      var email = $('#email').val();
      UserInfo.insert({names:names,city:city,email:email});
    }
  });

单击添加按钮后，我想获取输入数据（名称，位置和电子邮件）并将数据插入到表中，但它显示一些错误，如＆＃34;模板未定义＆＃34;。

Answer 1

您应该在客户端块中移动模板代码，并且不建议创建单独的帮助程序。改为使用帮助程序阻止。

if (Meteor.isClient) {
 Template.main.helpers({
  users: function() {
    return UserInfo.find();
 }
 });
 Template.main.events({
  'click #add': function () {
    var names = $('#names').val();
    var city = $('#city').val();
    var email = $('#email').val();
    UserInfo.insert({names:names,city:city,email:email});
  };
 });
}