在玉石中如何解释？ <％=姓氏％>

Question

I currently have my code like this but the first name appears the way it is being shown. I am trying to figure out what this is in jade, because this is not right.

Jade File

div.centerContent
    script(type="text/javascript", src="/js/main.js")

    h4 User goes here with equal before it no space
        div#user
            p!= "<%=firstName%>"
            | <%=lastName%>
            p!="<%= email %>"
            p <%=phone%>
            p <%=birthday%>
            button.edit Edit



    script(id="userTemplate", type ="text/template")
            p <%=firstName%> <%=lastName%>
            p <%=email%>
            p <%=phone%>
            p <%=birthday1%>
            button.edit Edit

    script(id="userEditTemplate", type ="text/template")
        div
            form(action="#")
                input(type="text", class="firstName", value="<%= firstName %>") input(type="text", class="lastName", value="<%= lastName %>")
                input(type="email", class="email", value="<%= email %>")
                input(type="date", class="birthday", value="<%= birthday %>")
            button.save Save
            button.cancel Cancel
    hr

Here I will include my main.js file maybe I am doing something wrong there.

main.js

(function () {
    window.App = {
        Models: {},
        Collections: {},
        Views: {},
        Templates: {},
        Router: {}

    };

    // MODEL
    App.Models.User = Backbone.Model.extend({
        defaults: {
            firstName: 'first',
            lastName: 'last',
            email: 'Email',
            phone: '222',
            birthday: 'date'
        },

        validate: function (attrs) {
            if (!attrs.firstName) {
                return 'You must enter a real first name.';
            }
            if (!attrs.lastName) {
                return 'You must enter a real last name.';
            }
            if (attrs.email.length < 5) {
                return 'You must enter a real email.';
            }
            if (attrs.phone.length < 10 && attrs.phone === int) {
                return 'You must enter a real phone number, if you did please remove the dash and spaces.';
            }
            if (attrs.city.length < 2) {
                return 'You must enter a real city.';
            }
        },

        initialize: function() {
             user.on('invalid', function (model, invalid) {
                console.log(invalid);
            });
        }

    });



    //VIEW
    App.Views.User = Backbone.View.extend({
        model: App.Models.User,
        //tagName: 'div',
        //id: 'user',
        //className: 'userProfile',
        template: _.template($("#userTemplate").html()),
        editTemplate: _.template($("#userEditTemplate").html()),

        initialize: function (){

        }

        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        },

        events: {
            'click button.edit': 'editProfile',
        //  'click button.save': 'saveEdits',
            'click button.cancel': 'cancelEdits'
        },

        editProfile: function () {
            this.$el.html(this.editTemplate(this.model.toJSON()));

        }, 


        cancelEdits: function() {
            this.render();
        }

    });
    //start history service
    Backbone.history.start();

    var user = new App.Views.User({el: 'div #user'});
    user.render();
})();

Answer 1

As far as Jade sees, "<%= firstName %>" is just a String literal. But, it will HTML encode it:

<input type="text" class="firstName" value="&lt;%= firstName %&gt;">

To keep the value as-is, add a ! before the = to skip encoding.

input(type="text", class="firstname", value!="<%= firstName %>")

<input type="text" class="firstName" value="<%= firstName %>">

From the documenation :

Code buffered by = is escaped by default for security, however to output unescaped return values you may use != :

 p!= aVarContainingMoreHTML 

---

Also note that, if you're using an older version of Jade , the contents of script elements may be treated in whole as text literals.

Jade version 0.31.0 deprecated implicit text only support for scripts and styles. To fix this all you need to do is add a . character after the script or style tag.

Before 0.31.0, your view would render as ( abridged ):

<script id="userEditTemplate" type="text/template">
    div.userProfile
        form(action="#")
        # ...
</script>