2016-05-30 6 views
3

私はこのチュートリアル(https://stormpath.com/blog/build-nodejs-express-stormpath-app)のフォームをWebアプリケーション用に拡張しようとしています。私は、チェックボックスを持ちたいと現在、私のヒスイのファイルに次のコードを持って次のようにサーバー側でStormpath + Jade + node.js +のチェックボックス

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の状態を保存するチェックボックスを作成する方法を知っていますか?ストームパスは10MBを節約できますか?

答えて

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で働いていて、あなたが見てきたチュートリアルの記事を書きました:)

関連する問題