Nodejs和Jade将我的提交按钮呈现为文本字段

时间:2014-05-30 20:54:16

标签: node.js forms pug

在nodejs应用程序中,使用Jade模板,我无法管理呈现提交按钮。

这是我的app.js代码:

var express = require('express');
var app = express();

app.get('/todo', function(req,res){
  res.set({
    "Content-Type" : "text/html",
    "charset" : "utf-8"
  });
  res.render('todo_list.jade', {list : [
    "Lire un livre", "Jouer de la musique", "Apprendre la programmation", "Jouer au dé pipé !"
  ]});
});

// app.post('/todo/ajouter', function(req, res){
//
// });
// 
// app.post('/todo/supprimer/:id', function(req, res){
//
// });

app.listen(8080);

这是我的观点/ todo_list.jade:

doctype html

head
  title Ma todo list

body
  h1 Ma todo list
  ul
    - for (var i = 0; i < list.length; i++)
        li #{list[i]}
  form
    label(for=new_task) Que dois-je faire ?
    input(type=text, id=new_task, name=new_task, size=15)
    input(type=submit, value=Ajouter)

那么为什么我得到两个文本字段而不是文本字段和按钮?

在我的应用程序根文件夹中,我已安装(带有package.json文件)表达~4.3.2,cookie-session~1.0.2,body~4.4.2和jade~1.3.1

1 个答案:

答案 0 :(得分:3)

问题的原因是您没有正确地为您的代码分配属性。在Jade中,属性值被评估为JavaScript表达式。这意味着保留不带引号的属性值将使用变量的值而不是文字值。

这是固定的Jade模板,它将为您提供所需的输出:

doctype html

head
  title Ma todo list

body
  h1 Ma todo list
  ul
    - for (var i = 0; i < list.length; i++)
        li #{list[i]}
  form
    label(for='new_task') Que dois-je faire ?
    input(type='text', id='new_task', name='new_task', size=15)
    input(type='submit', value='Ajouter')