2016-05-30 60 views
3

我一直在尝试从我的Web应用程序的本教程(https://stormpath.com/blog/build-nodejs-express-stormpath-app)中扩展表单。我想有一个复选框,目前有下面的代码在我玉文件:Stormpath + Jade + node.js + express的复选框

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

这个问题似乎是与标记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工作,我写了你一直在看的教程文章:)