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

Question

我一直在尝试扩展这个教程的表单（https://stormpath.com/blog/build-nodejs-express-stormpath-app），用于我的 web 应用。我想要一个复选框，目前在我的 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中创建可以保存状态的复选框吗？

- Theo

Answer 1

问题似乎出在输入元素的标记上，您需要告诉它如何根据传递到模板的 "sports" 变量设置元素的 "checked" 属性：

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

我希望这能有所帮助！我在Stormpath工作，编写了你正在查看的教程文章 :)

- robertjd