与Jade合作

时间:2015-06-08 08:48:22

标签: node.js pug

我尝试使用Jade创建一个简单的注册页面。这是源代码:

extends ../../layouts/default

block head
  title Sign Up

block neck
  link(rel='stylesheet', href='/views/signup/index.min.css?#{cacheBreaker}')

block feet
  script(src='/views/signup/index.min.js?#{cacheBreaker}')

block body
  div.row
    div.col-sm-6
      div.page-header
        h1 Sign Up
      div#signup
      if oauthTwitter || oauthGitHub || oauthFacebook || oauthGoogle || oauthTumblr
        hr
        p Or sign up using...
        if oauthMessage
          div.alerts
            div.alert.alert-info.alert-dismissable
              button.close(type='button', data-dismiss='alert') ×
              |#{oauthMessage} 
              b
                a(href='/login/') Login Here
        div.btn-group.btn-group-justified
          if oauthTwitter
            a.btn.btn-info(href='/signup/twitter/')
              i.fa.fa-twitter.fa-lg
              |  Twitter
          if oauthGitHub
            a.btn.btn-info(href='/signup/github/')
              i.fa.fa-github.fa-lg
              |  GitHub
          if oauthFacebook
            a.btn.btn-info(href='/signup/facebook/')
              i.fa.fa-facebook-square.fa-lg
              |  Facebook
          if oauthGoogle
            a.btn.btn-info(href='/signup/google/')
              i.fa.fa-google-plus-square.fa-lg
              |  Google
          if oauthTumblr
            a.btn.btn-info(href='/signup/tumblr/')
              i.fa.fa-tumblr-square.fa-lg
              |  Tumblr
    div.col-sm-6.marketing
      div.page-header
        h1 

      i.fa.fa-thumbs-o-up.super-awesome

  script(type='text/template', id='tmpl-signup')
    form
      div.alerts
        |<% _.each(errors, function(err) { %>
        div.alert.alert-danger.alert-dismissable
          button.close(type='button', data-dismiss='alert') &times;
          |<%- err %>
        |<% }); %>
      div.form-group(class!='<%- errfor.username ? "has-error" : "" %>')
        label Pick a Username:
        input.form-control(type='text', name='username', value!='<%= username %>')
        span.help-block <%- errfor.username %>
      div.form-group(class!='<%- errfor.email ? "has-error" : "" %>')
        label Enter Your Email:
        input.form-control(type='text', name='email', value!='<%= email %>')
        span.help-block <%- errfor.email %>
      div.form-group(class!='<%- errfor.password ? "has-error" : "" %>')
        label Create a Password:
        input.form-control(type='password', name='password', value!='<%= password %>')
        span.help-block <%- errfor.password %>
      div.form-group(class!='<%- errfor.serial ? "has-error" : "" %>')
        label Enter Your Serial Number:
        input.form-control(type='text', name='serial', value!='<%= serial %>')
        span.help-block <%- errfor.serial %>

      div.form-group
        button.btn.btn-primary.btn-signup(type='button') Create My Account

这里有趣的地方;当我删除&#34; serial&#34;部分,如下:

      div.form-group(class!='<%- errfor.serial ? "has-error" : "" %>')
        label Enter Your Serial Number:
        input.form-control(type='text', name='serial', value!='<%= serial %>')
        span.help-block <%- errfor.serial %>

该页面工作正常,但是当我添加&#34; serial&#34;部分,页面没有显示?有什么想法吗?

更新:我能够找到问题,就在这一行:

 input.form-control(type='text', name='serial', value!='<%= serial %>')

当我将value!='<%= serial %>'的值更改为电子邮件或用户名(例如:值!=&#39;&lt;%=用户名%&gt;&#39;)而不是value!='<%= serial %>'时,页面显示,但当我保持连续,它不会。

1 个答案:

答案 0 :(得分:0)

我终于明白了。真傻。我忘了添加&#34; serial&#34;到我的./public/signup/index.js

!function(){"use strict";app=app||{},app.Signup=Backbone.Model.extend({url:"/signup/",defaults:{errors:[],errfor:{},username:"",email:"",password:"", serial:""}})...