Expressでテンプレートエンジンjadeを使う時の参考

Express + jadeでアプリケーションを作っています。もとい、作り始めています。

jadeの記法は、インデントに意味があるので気をつけることと、テキストエディタのプラグインは必須かと思います。

エディタのプラグイン

• Jade - Packages - Package Control
  https://packagecontrol.io/packages/Jade
• How to add Jade syntax highlighting in Sublime Text 2?
  Quora https://www.quora.com/How-to-add-Jade-syntax-highlighting-in-Sublime-Text-2

まずこれを読む

• Jade公式リファレンス

  • Template Engine http://jade-lang.com/reference/

• formの部品がすべてかかれているgitHub
  このままコピーペースト、クラスの部分をカスタマイズでできそうなくらいform部品が揃っています。

  • https://github.com/lmaccherone/sb-admin-2-meteor/blob/master/client/forms.jade

• Bootstrapでのjadeの書き方
  各コンポーネント毎になっているのでリファレンスに便利。Bootstrapを使ってサイトを作る時などに

  • https://github.com/ALT-F1/bootstrap3-jade-node-express-grunt/tree/master/app/views/bootstrap3-templates

Sample

node.jsからの値の表示

文字列

p #{name}

配列

each item in publishers
	p #{item}   
	
### Javascriptの読み込み分岐

```node.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
	res.render('ccc', {layout:'ccc' });
});

module.exports = router;

case layout
  when "ccc"
    script(src='/javascripts/ccc.js')
  when "ppp"
    script(src='/javascripts/ppp.js')
    script(src='/bower_components/dropzone/dist/min/dropzone.min.js')
  when "input"
    script(src='/javascripts/input.js')
  default
    - script(src='/javascripts/def.js')

セレクトボックス

node.js

var express = require('express');
var router = express.Router();




/* GET home page. */
router.get('/', function(req, res, next) {
	var res_vals ={}
	res_vals.publishers={
		'1111':'A',
		'2222':'B',
		'3333':'C'
	}

console.log(res_vals);
    res.render('score_input', res_vals);

});

module.exports = router;

.form-group
  .row
      label.col-md-2.control-label 出版社
      .col-md-10
          select#publisher
              each publisher, i in publishers
                  option(value=i)  #{publisher}
                  

ラジオボタン

.form-group
  .row
      label.col-md-2.control-label 貨幣単位
      .col-md-10
        label.radio-inline
          input#optionsRadios(type="radio", name="currency", value="option1", checked="")
          | 円
        label.radio-inline
          input#optionsRadios(type="radio", name="currency", value="option2")
          | ドル
        label.radio-inline
          input#optionsRadios(type="radio", name="currency", value="option3")
          | ユーロ

ファイル受付フォーム

.form-group
  .row
      label.col-md-2.control-label カバー写真
      .col-md-10
          input#inputImage(type="file")

またふえるかも

おまけ

東洋経済オンラインで「エンジニア夫婦のあるある日記」を連載中です

エンジニア夫婦のあるある日記