1

Swig と Express をいじってみましたが、ルートに名前を付けることに慣れているので、URL を直接使用しなくても、ビューやリダイレクトでルートを参照できます。

Express を拡張する素敵なモジュールnode-reversable-routerを見つけました。これはうまく機能するようですが、ヘルパー url() メソッド/関数がビュー (Swig) に正しく公開されていないようです。したがって、そこで使えない。

Express は「500 TypeError: Cannot read property 'login' of undefined」(私のビューの url('login') ヘルパー) をスローします。

Jade 以外のテンプレート エンジンでこのルーターを使用したことのある人はいますか?

これは私の app.js ファイルです:

var express = require('express'),
    cons = require('consolidate'),
    routes = require('./routes'),
    login = require('./routes/login'),
    http = require('http'),
    swig = require('swig'),
    Router = require('reversable-router'),
    path = require('path');

var app = express();
var router = new Router();

router.extendExpress(app);
router.registerAppHelpers(app);

swig.init({
    allowErrors: true,
    cache: false,
    encoding: 'utf8',
    root: __dirname + '/views/'
});

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views/');
app.set('view engine', 'html');
app.set('view options', {
    layout: false
});
app.locals({
    assets: '/assets'
});
app.engine('html', cons.swig);
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(app.locals.assets, express.static(__dirname + '/public'));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

app.get('/', 'home', routes.index);
app.get('/login', 'login', login.index);

console.log(app._router.build('login'));
// above outputs '/login' correctly

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

これは私のroutes/login.jsです(Expressで生成されたストックスタンダード):

exports.index = function(req, res){
  res.render('login.html');
};

これは私の view/login.html です - url() ヘルパーはフォーム アクションの半分ほど下にあります:

{% extends "base.html" %}

{% block htmlextra %}class="login-bg"{% endblock %}
{% block title %}Login{% endblock %}

{% block customcss %}
    <!-- this page specific styles -->
    <link rel="stylesheet" href="{{ assets }}/css/page/login.css" type="text/css" media="screen" />
{% endblock %}

{% block content %}
    <div class="row-fluid login-wrapper">
        <a href="/">
            <img class="logo" src="{{ assets }}/img/logo-white.png">
        </a>

        <div class="span4 box">
            <div class="content-wrap">
                <h6>Log in</h6>
                <form action="{{ url('login') }}" method="post">
                    <input type="text" name="email" id="email" class="span12" placeholder="E-mail address">
                    <input type="password" name="password" id="password" class="span12" placeholder="Your password">
                    <a href="/login/reset" class="forgot">Forgot password?</a>
                    <div class="remember">
                        <input type="checkbox" name="remember_me" id="remember_me" value="y">
                        <label for="remember_me">Remember me</label>
                    </div>
                    <input class="btn-glow primary login" type="submit" name="submit" value="Log in">
                </form>
            </div>
        </div>
    </div>

    <!-- scripts -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="/assets/js/bootstrap.min.js"></script>
    <script src="/assets/js/theme.js"></script>
{% endblock %}
4

0 に答える 0