I am trying to render this template from my backbone views but it is not working? Anyone know what I am doing wrong here thanks! I will include my jade file for the views and the main.js file for the backbone js script.
Jade File
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 file
(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();
})();
I found that you didn't assign backbone view a model.
So you could try this:
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();
And test-template is:
<script id="test-template" type="text/template">
<div><%=name%></div>
</script>
HTML:
<body>
<div id="user">
</div>
</body>
You can define backbone view's el attribute in Backbone view declaration. And remember to assign view a model when you initiate it.
[EDIT]
JADE:
script(id="userTemplate", type ="text/template")
p #{firstName} #{lastName}
p #{email}
p #{phone}
p #{birthday}
button.edit Edit
Modify template generation method:
<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());
Hope this is helpful for you.