1

私は現在、このようなコードを持っていますが、最初の名前は表示されているように表示されます。これが正しくないので、これが翡翠にあるものを理解しようとしています。

ジェイドファイル

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

ここに main.js ファイルを含めます。おそらく、そこで何か間違ったことをしているのでしょう。

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();
})();
4

1 に答える 1

2

ジェイドが見る限り、"<%= firstName %>"は単なるString文字通りです。ただし、HTML エンコードします。

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

!値をそのまま保持するには、 の前にa を追加して=エンコードをスキップします。

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

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

ドキュメントから：

によってバッファリングされたコード=は、セキュリティのためにデフォルトでエスケープされますが、エスケープされていない戻り値を出力するには、次を使用できます!=。

p!= aVarContainingMoreHTML

また、古いバージョンの Jade を使用している場合、要素の内容script全体がテキスト リテラルとして扱われる可能性があることに注意してください。

Jade バージョン 0.31.0 では、スクリプトとスタイルの暗黙的なテキストのみのサポートが廃止されました。これを修正するには.、script または style タグの後に文字を追加するだけです。

0.31.0 より前では、ビューは次のようにレンダリングされます (要約):

<script id="userEditTemplate" type="text/template">
    div.userProfile
        form(action="#")
        # ...
</script>
于 2013-07-10T18:59:16.377 に答える