meteor如何为用户创建表单以更新其个人资料详细信息

时间:2014-12-01 09:47:59

标签: meteor meteor-accounts

作为我的应用开发环境的一部分,我创建了一些种子数据,用于创建用户并在其个人资料字段中添加一些数据。

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

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

我已经尝试过一个表单作为" profile"的一部分。菜单设置,但我没有成功获取数据更新是该字段。未添加新的/更新的数据。

我的模板看起来像这样

<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},
});

我使用了Allow功能允许用户编辑他们的profiel字段。

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');

我坚信我缺乏编程技巧会让我留下重要的东西。

2 个答案:

答案 0 :(得分:4)

我建议您查看这三个软件包:aldeed:simple-schemaaldeed:autoformaldeed:collection2。他们的例子已经包含了你的问题的答案!

简单模式将允许您快速制作文档(例如用户)的模式,指示每个字段的类型,数组或字符串的最大长度等。 Autoform允许您从此模式快速生成表单,而Collection2允许您将模式绑定到Collection,从而自动执行检查和清理。最后,如果您必须更改文档架构(例如通过添加新字段),您只需更改架构,一切都会相应更改(&gt;表单的行为方式取决于您的工作方式,您的馆藏管理方式)。

在你的情况下,

//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"
}}

答案 1 :(得分:-1)

你做这件事的方法有一个问题,就是如果你引入了一些像“角色”这样的东西来存储配置文件中的数据,你的代码可以让某人将自己提升为管理员,如果你不清理他们尝试和设置的内容。