0

バックボーン ビューからこのテンプレートをレンダリングしようとしていますが、うまくいきませんか? ここで私が間違っていることを知っている人は誰でも感謝します! ビュー用の jade ファイルと、バックボーン js スクリプト用の main.js ファイルを含めます。

ジェイドファイル

extends layout
block content   
    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 #{birthday}
                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="number", class="phone", value=#{phone})
                    input(type="date", class="birthday", value=#{birthday})
                button.save Save
                button.cancel Cancel
        hr

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

1

バックボーン ビューをモデルに割り当てていないことがわかりました。

だからあなたはこれを試すことができます：

      var MyModel = Backbone.Model.extend({
        defaults: {
            name: 'first',
            lastName: 'last',
            email: 'Email',
            phone: '222',
            birthday: 'date'
        }
    });

    var MyView = Backbone.View.extend({
        el: "#user",
        model: MyModel,
        template: _.template($("#test-template").html()),
        render: function(){
            this.$el.html(this.template(this.model.toJSON()));
            return this;
        }
    });

    var myView = new MyView({model:new MyModel()});
    myView.render();

テストテンプレートは次のとおりです。

<script id="test-template" type="text/template">
   <div><%=name%></div>
</script>

HTML:

<body>
<div id="user">
</div>
</body>

バックボーン ビューの宣言で、バックボーン ビューの el 属性を定義できます。また、モデルを開始するときにモデルを割り当てることを忘れないでください。

[編集]

ジェイド:

script(id="userTemplate", type ="text/template")
            p #{firstName} #{lastName}
            p #{email}
            p #{phone}
            p #{birthday}
            button.edit Edit

テンプレートの生成方法を変更します。

<script src="https://raw.github.com/weepy/jade-browser/master/jade.js"></script>
<script src="https://raw.github.com/weepy/jade-browser/master/jade-shim.js"></script>

template: jade.compile($("#userTemplate").text());

これがお役に立てば幸いです。

于 2013-07-11T02:36:53.587 に答える