复选框与Stormpath + Jade + node.js + express

时间:2016-05-30 16:06:49

标签: node.js express pug stormpath

我一直在努力为我的网络应用扩展本教程(https://stormpath.com/blog/build-nodejs-express-stormpath-app)的表单。我想要一个复选框,目前在我的jade文件中有以下代码:

div.form-group
      label.col-sm-4 Sports
      div.col-sm-8
        input.form-control(placeholder='e.g. What sports are you interested in?',
          name='sports',
          type='checkbox',
          value="true")

服务器端的.js文件如下:

var profileForm = forms.create({
  givenName: forms.fields.string({
    required: true
  }),
  surname: forms.fields.string({ required: true }),
  city: forms.fields.string(),
  state: forms.fields.string(),
  zip: forms.fields.string(),
  sports: forms.fields.string()
});

// A render function that will render our form and
// provide the values of the fields, as well
// as any situation-specific locals

function renderForm(req,res,locals){
  res.render('profile', extend({
    title: 'My Profile',
    csrfToken: req.csrfToken(),
    givenName: req.user.givenName,
    surname: req.user.surname,
    city: req.user.customData.city,
    state: req.user.customData.state,
    zip: req.user.customData.zip,
    sports: req.user.customData.sports
  },locals||{}));
}

// Export a function which will create the
// router and return it

module.exports = function profile(){

  var router = express.Router();

  router.use(cookieParser());

  router.use(bodyParser.urlencoded({ extended: true }));

  router.use(csurf({ cookie: true }));

  // Capture all requests, the form library will negotiate
  // between GET and POST requests

  router.all('/', function(req, res) {
    profileForm.handle(req,{
  success: function(form){
    // The form library calls this success method if the
    // form is being POSTED and does not have errors

    // The express-stormpath library will populate req.user,
    // all we have to do is set the properties that we care
    // about and then call save() on the user object:
    req.user.givenName = form.data.givenName;
    req.user.surname = form.data.surname;
    req.user.customData.city = form.data.city;
    req.user.customData.state = form.data.state;
    req.user.customData.zip = form.data.zip;
    req.user.customData.sports = form.data.sports;
    req.user.customData.save();
    req.user.save(function(err){
      if(err){
        if(err.developerMessage){
          console.error(err);
        }
        renderForm(req,res,{
          errors: [{
            error: err.userMessage ||
            err.message || String(err)
          }]
        });
      }else{
        renderForm(req,res,{
          saved:true
        });
      }
    });
  },

好像没有保存复选框状态,因为当我刷新它时总是返回相同的状态。有谁知道如何创建在customData中保存状态的复选框Stormpath允许你节省10MB?

1 个答案:

答案 0 :(得分:1)

问题似乎与input元素的标记有关,您需要告诉它如何根据您传递的checked变量设置元素的sports属性到模板:

input.form-control(placeholder='e.g. What sports are you interested in?',
    name='sports',
    type='checkbox',
    value="true"
    checked=(sports ? "checked" : undefined))

我希望这有帮助!我在Stormpath工作,我写了你一直在看的教程文章:)