带有 Stormpath + Jade + node.js + express 的复选框

Question

我一直在尝试为我的 Web 应用程序扩展本教程 (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
        });
      }
    });
  },

似乎复选框状态未保存，因为当我刷新它时总是 returns 到相同的状态。有谁知道我如何创建在自定义数据中保存状态的复选框 Stormpath 允许您保存 10MB？

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 工作，我写了您一直在看的教程文章:)

带有 Stormpath + Jade + node.js + express 的复选框

Checkbox with Stormpath + Jade + node.js + express

node.js

express

stormpath

pug