Databases
StackOverflow2013
Postsdbo
POWhy is my view in backbone not rendering?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy is my view in backbone not rendering?
    text
    copied!<p>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.</p> <p>Jade File</p> <pre><code>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 </code></pre> <p>Main.Js file</p> <pre><code>(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 &lt; 5) { return 'You must enter a real email.'; } if (attrs.phone.length &lt; 10 &amp;&amp; attrs.phone === int) { return 'You must enter a real phone number, if you did please remove the dash and spaces.'; } if (attrs.city.length &lt; 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(); })(); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload