嘿所以我试图从下划线切换到车把,但没有从模型渲染,但模板正在正确更改。此外,当editTemplate从单击编辑按钮显示时,#{firstName}和其他显示为未定义。
在我的布局jade文件中,我确实包含了所有相应的文件,jquery,下划线,主干和把手。
这是我的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() {
this.on('invalid', function (model, invalid) {
console.log(invalid);
});
}
});
//VIEW
App.Views.User = Backbone.View.extend({
model: App.Models.User,
el: 'user',
//tagName: 'div',
//id: 'user',
//className: 'userProfile',
initialize: function (){
},
render: function() {
var template = Handlebars.compile($("#userTemplate").html());
var 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()));
},
cancelEdits: function() {
this.render();
}
});
//start history service
Backbone.history.start();
var user = new App.Views.User({model: new App.Models.User()});
user.render();
})();
这是我的玉文件
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
布局玉器文件
doctype 5
html
head
title=title
link(rel='stylesheet', href='/css/style.css', type='text/css')
link(rel='stylesheet', href='/css/bootstrap-responsive.css')
link(href='/css/bootstrap.css', rel='stylesheet', type='text/css')
link(href='/css/font-awesome.min.css', rel='stylesheet', type='text/css')
script(src='/js/jquery.min.js', type='text/javascript')
script(src='/js/jquery.validate.min.js', type='text/javascript')
script(src='/js/script.js', type='text/javascript')
script(src='/js/underscore.min.js', type='text/javascript')
script(src='/js/backbone.min.js', type='text/javascript')
script(src='/js/handlebars.js', type='text/javascript')
body
div#container
div#header
block content
include footer
答案 0 :(得分:0)
如果有人想看到答案,那么调用这个
基本上是错误的#{firstName}
而不是正确的用法:
{{firstName}}