流星我如何为用户创建表格以更新其个人资料详细信息

Question

在我的应用开发环境中，我创建了一些种子数据来创建用户并将一些数据添加到他们的个人资料字段中。

现在，我可以在应用程序的个人资料视图中显示该数据。

我的问题是，允许用户在注册时添加此数据的最佳方法是什么？

我已经尝试过将表单作为“配置文件”菜单集的一部分来执行此操作，但是我没有成功更新该字段中的数据。没有添加新的/更新的数据。

我的模板看起来像这样

<template name="profileForm">
<form class="profileform form-horizontal" role="form">
    <div class="form-group">
        <!-- <label for="inputFirstName">First Name</label> -->
        <div class="col-sm-4">
            <input id="firstname" type="text" name="firstname" placeholder={{firstName}} />
        </div>
    </div>
    <div class="form-group">
        <!-- <label for="inputFirstName">Last Name</label> -->
        <div class="col-sm-4">
            <input id="lastname" type="text" name="lastname" placeholder={{lastName}} />
        </div>
    </div>
    <div class="form-group">
        <!-- <label for="inputFirstName">E-Mail Address</label> -->
        <div class="col-sm-4">
            <input id="email" type="email" name="email" placeholder={{email}} />
        </div>
    </div>
    <div class="form-group">
        <!-- <label for="inputFirstName">Phone Number</label> -->
        <div class="col-sm-4">
            <input id="phone" type="tel" name="phone" placeholder={{phoneNumber}} />
        </div>
    </div>
    <div class="form-group">
        <!-- <label for="inputFirstName">School</label> -->
        <div class="col-sm-4">
            <input id="school" type="text" name="school" placeholder={{schoolName}} />
        </div>
    </div>
    <div class="form-group">
        <!-- <label for="inputFirstName">First year</label> -->
        <div class="col-sm-4">
            <input id="firstschoolyear" type="text" name="firstschoolyear" placeholder={{firstSchoolYear}} />
        </div>
    </div>
    <div class="form-group">
        <!-- <label for="inputFirstName">Last Year</label> -->
        <div class="col-sm-4">
            <input id="lastschoolyear" type="text" name="lastschoolyear" placeholder={{lastSchoolYear}} />
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-4">
            <label>Did you Matriculate Here?</label>
        </div>
        <div class="col-xs-3">
            <select class="form-control">
                <option>Yes</option>
                <option>No</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <!-- <label for="inputFirstName">House Name</label> -->
        <div class="col-sm-4">
            <input id="housename" type="text" name="housename" placeholder={{houseName}} />
        </div>
    </div>
    <div class="form-group">
        <!-- <label for="inputFirstName">Country Living In</label> -->
        <div class="col-sm-4">
            <input id="country" type="text" name="country" placeholder={{country}} />
        </div>
    </div>
    <div class="form-group">
        <!-- <label for="inputFirstName">City</label> -->
        <div class="col-sm-4">
            <input id="cityofresidence" type="text" name="cityofresidence" placeholder={{cityOfResidence}} />
        </div>
    </div>
    <div class="form-group">
        <!-- <label for="inputFirstName">Employment Industry</label> -->
        <div class="col-sm-4">
            <input tid="emplindustry" ype="text" name="emplindustry" placeholder={{emplIndustry}} />
        </div>
    </div>
    <button class="profilesubmit">Update Profile</button>
</form>

我的JS文件看起来像这样

Template.profileForm.events({
  "submit .profileform": function (event) {
// This function is called when the profile form is submitted

var firstname = event.target.firstname.value,
 lastname = event.target.astname.value,
 email = event.target.email.value,
 phone = event.target.phone.value,
 school = event.target.school.value,
 firstschoolyear = event.target.firstschoolyear.value,
 lastschoolyear = event.target.lastschoolyear.value,
 matriculated = event.target.matriculated.value,
 housename = event.target.houseelname.value,
 country = event.target.country.value,
 cityofresidence = event.target.cityofresidence.value,
 emplindustry = event.target.emplindustry.value;

if(Meteor.userId())
 {
    Meteor.users.update({_id: Meteor.userId()},{$set:{
        "profile.firstname": firstname,      
        "profile.lastname": lastname,
        "profile.phone": phone,
        "profile.school": school,
        "profile.firstschoolyear": firstschoolyear,
        "profile.lastschoolyear": lastschoolyear,
        "profile.matriculated": matriculated,
        "profile.housename": housename,
        "profile.country": country,
        "profile.cityofresidence": cityofresidence,
        "profile.emplindustry": emplindustry,
        "profile.joined": new Date(), // current time
      }});
  }
// Clear form
//event.target.text.value = "";

// Prevent default form submit
return false;
  }
});

Template.profileForm.helpers({
  email: function() {return Meteor.user().emails[0].address},
  userName: function () {return Meteor.user().username},
  firstName: function () {return Meteor.user().profile.firstname},
  lastName: function () {return Meteor.user().profile.lastname},
  phoneNumber: function () {return Meteor.user().profile.phone},
  schoolName: function () {return Meteor.user().profile.schoolName},
  firstSchoolYear: function () {return Meteor.user().profile.firstschoolyear},
  lastSchoolYear: function () {return Meteor.user().profile.lastschoolyear},
  matriculated: function () {return Meteor.user().profile.matriculated},
  houseName: function () {return Meteor.user().profile.housename},
  country: function () {return Meteor.user().profile.country},
  cityOfResidence: function () {return Meteor.user().profile.cityofresidence},
  emplIndustry: function () {return Meteor.user().profile.emplindustry},
  signedUp: function () {return Meteor.user().profile.joined},
});

我使用了允许功能来允许用户编辑他们的个人资料字段。

Meteor.publish("userData", function () {
  return Meteor.users.find({_id: this.userId},{ fields: {'profile': 1}});
});

Meteor.users.allow({
  update: function (userId, user, fields, modifier) {
    // can only change your own documents
    if(user._id === userId)
    {
      Meteor.users.update({_id: userId}, modifier);
      return true;
    }
    else return false;
  }
});

我的订阅如下所示。

Meteor.subscribe('userData');

我坚信我缺乏编程技能，导致我遗漏了一些重要的东西。

Answer 1

我建议看一下这三个包：aldeed：simple-schema，aldeed：autoform和aldeed：collection2。他们的例子已经包含了您问题的答案！

通过简单模式，您可以快速创建文档（例如用户）的架构，指示每个字段的类型，数组或字符串的最大长度，等等。Autoform允许您从此架构快速生成表单，而Collection2允许您将架构绑定到Collection，从而自动进行检查和清理。最后，如果您必须更改文档架构（例如，通过添加新字段），则只需更改架构，一切都会相应更改（>表单的行为方式取决于您的操作方式，集合的管理方式）。

就你而言

//Shared code
var userProfileSchema = new SimpleSchema({
  firstName : {
    type : String,
    max : 100,
    defaultValue : ''
  },
  lastName : {
    type : String,
    max : 100,
    defaultValue : ''
  },
  email : {
    type : String,
    regEx : SimpleSchema.RegEx.Email,
    optional : true
  },
  ...
});

var userSchema = {
  //Add all the fields of a normal Meteor user
  //Then add your own schema:
  profile : userProfileSchema
};

Meteor.users.attachSchema(userSchema);

现在，您的架构已正确定义并附加到集合中。
Triforce的第三部分现在是aldeed:autoform：只需生成表格！

{{> quickForm 
  schema=userProfileSchema doc=getProfile 
  type=method meteormethod="updateSelfProfile"
}}