javascript - Backbone 模型没有默认渲染？需要 Jade 和 Backbone 大师

Question

嘿，我遇到了一个问题，我的模板发生了变化，但主干模型似乎没有提供我需要的信息。我正在努力解决这个问题，以便我可以继续制作收藏品。我没有收到任何错误，我正在使用 Handlebars ，但也尝试了下划线的模板，问题不在于此，而是与信息显示有关。当我单击编辑时，编辑模板显示它为 #{firstName} 和其他人显示未定义。

主.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() {
             this.on('invalid', function (model, invalid) {
                console.log(invalid);
            });
        }

    });


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


        initialize: function (){

        },


    render: function() {
        this.template = Handlebars.compile($("#userTemplate").html());
        this.editTemplate = Handlebars.compile($("#userEditTemplate").html());

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

    }, 

        //saveEdits: function (e) {
        //  e.preventDefault();

        //  var formData = {},
        //      prev = this.model.previousAttributes();
//

            //get form data
        //  $(e.target).closest('form').find(':input').not('button').each(function(){
        //      var el = $(this);
        //      formData[el.attr('class')] = el.val();
        //  });

            //update model
        //  this.model.set(formData);

            //render view
        //  this.render();

            //update array
        //},

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

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

    var user = new App.Views.User({model: new App.Models.User()});
    user.render();
})();

Jade

extends layout
block content   
    div.centerContent

        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} 1
                p #{email} 2 
                p #{phone} 3 
                p #{birthday} 4
                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
        script(type="text/javascript", src="/js/main.js")

Answer 1

尝试从你的 View 中删除这一行

model: App.Models.User,

您正在尝试将 Backbone 函数直接分配给您的 View 。

问题也是因为你的渲染方法中的这一行..

render: function() {
       var template = Handlebars.compile($("#userTemplate").html());
       var editTemplate = Handlebars.compile($("#userEditTemplate").html());

editemplate 对于 render 方法是本地的，在其他方法中不可用。

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

您正在尝试使用 this.editTemplate 访问模板，但该变量是渲染方法的本地变量，而不是 View 的本地变量。所以您无法访问它。

不是在本地范围内创建它，而是实例化它自己的 View ，以便它在 View 的其他方法中可用。

render: function() {
      this.template = Handlebars.compile($("#userTemplate").html());
      this.editTemplate = Handlebars.compile($("#userEditTemplate").html());

然后它应该对同一 View 中的其他方法可用。