3
안녕하세요, 밑줄에서 핸들 바로 전환하려고하고 있지만 모델에서 렌더링되는 것이 없지만 템플릿이 올바르게 변경되고 있습니다. 또한 editTemplate이 편집 버튼을 클릭했을 때 표시되면 # {firstName}이 (가) 정의되지 않은 것으로 표시됩니다.핸들 바 코드에 어떤 문제가 있습니까?
내 레이아웃 옥 파일에는 적절한 파일, 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
자바 스크립트가 DOM이 구축되기 전에 페이지의 머리에 가져 오면, 템플릿에 이러한 참조는 만족하지 않습니다. – Pointy
맨 아래에로드 할 스크립트 main.js 파일을 옮겼습니다. 이제 렌더링이되지 않지만 오류는 표시되지 않습니까? – Lion789
'el : 'user''는 당신이 생각하는 것을 의미하지 않는다. 그 셀렉터는' '요소를 찾고있을 것이다. ... –