BackBone View not rendering properly and not sure why - javascript

I am new to BackBone and am trying to practice rendering from a collection. I know that none of this is supposed to be done in HTML, but a friend gave me this prompt and I want to get it to work. I've done lots of debugging, but I can't tell why Pond View isn't rendering properly?
<html>
<head>
<title>Pond Maker</title>
</head>
<body>
<div id="app">
<div id="#fishes"></div>
</div>
<script src="lib/jquery.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="fishModel.js"></script>
<script src="pondView.js"></script>
<script type="text/javascript">
var goldfish = new Fish({
name: 'Goldfish',
image: 'http://tinyurl.com/n4vgcl5'
});
var fugu = new Fish({
name: 'Pufferfish',
image: 'http://tinyurl.com/kxd7cuu'
});
var tuna = new Fish({
name: 'Tuna',
image: 'http://tinyurl.com/kxd7cuu'
});
var myPond = new Backbone.Collection([goldfish, fugu, tuna], {model: Fish});
var pondView = new PondView({collection: myPond});
</script>
</body>
</html>
var Fish = Backbone.Model.extend({
defaults: {
name: "Larry",
image: 'http://www.google.com'
}
});
var PondView = Backbone.View.extend({
el: "#app",
tagName: 'table',
initialize: function() {
this.listenTo(this.collection, "change:name", this.render);
},
render: function() {
$('#fishes').html('');
this.collection.each(function(fish) {
$('#fishes').append('<tr><td><%=' + fish.get("name") + '%> < /td><td><img src ="' + fish.get('image') + "/>< /td></tr >")
})
}
});

You didn't render your view.
Add after view creation:
var Fish = Backbone.Model.extend({
defaults: {
name: "Larry",
image: 'http://www.google.com'
}
});
var PondView = Backbone.View.extend({
el: "#app",
tagName: 'table',
initialize: function() {
this.listenTo(this.collection, "change:name", this.render);
},
render: function() {
this.$el.html('');
this.collection.each(function(fish) {
this.$el.append('<tr><td>' + fish.get("name") + ' </td><td><img src="' + fish.get('image') + '" /></td></tr>')
}.bind(this))
}
});
var goldfish = new Fish({
name: 'Goldfish',
image: 'http://tinyurl.com/n4vgcl5'
});
var fugu = new Fish({
name: 'Pufferfish',
image: 'http://tinyurl.com/kxd7cuu'
});
var tuna = new Fish({
name: 'Tuna',
image: 'http://tinyurl.com/kxd7cuu'
});
var myPond = new Backbone.Collection([goldfish, fugu, tuna], {model: Fish});
var pondView = new PondView({collection: myPond});
pondView.render()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<div id="app">
<div id="#fishes"></div>
</div>

Related

Accommodate multiple Backbone views, models and collections in the same page

I am struggling with displaying two models/collections in the same page.
<body>
<div id="mainContainer">
<div id="contentContainer"></div>
</div>
<div id="mainContainer2">
<div id="contentContainer2"></div>
</div>
<script id="list_container_tpl" type="text/template">
<div class="grid_5 listContainer">
<div class="box">
<h2 class="box_head grad_colour">Your tasks</h2>
<div class="sorting">Show: <select id="taskSorting"><option value="0">All Current</option><option value="1">Completed</option></select>
<input class="search round_all" id="searchTask" type="text" value="">
</div>
<div class="block">
<ul id="taskList" class="list"></ul>
</div>
</div>
</div>
</script>
<script id="list2_container_tpl" type="text/template">
<div class="grid_5 mylistContainer">
<div class="box">
<h2 class="box_head grad_colour">Your facets</h2>
<div class="sorting">
%{--Show: <select id="taskSorting"><option value="0">All Current</option><option value="1">Completed</option></select>--}%
<input class="search round_all" id="searchFacet" type="text" value="">
</div>
<div class="block">
<ul id="facetList" class="list"></ul>
</div>
</div>
</div>
</script>
<script id="task_item_tpl" type="text/template">
<li class="task">
<h4 class="name searchItem">{{ name }}</h4>
</li>
</script>
<script id="facet_item_tpl" type="text/template">
<li class="facet">
<h5 class="label searchItem">{{ label }}</h5>
</li>
</script>
<script>
var myapp = {
model: {},
view: {},
collection: {},
router: {}
};
var facetsSearch = {
model: {},
view: {},
collection: {},
router: {}
};
</script>
<script src="underscore-min.js"></script>
<script src="handlebars.min.js"></script>
<script src="backbone-min.js"></script>
<script>
/* avoid */
_.templateSettings = {
interpolate: /\{\{(.+?)\}\}/g
};
</script>
<script>
// model.tasks.js
myapp.model.Tasks = Backbone.Model.extend({
default:{
completed: 0,
name: ""
},
//url:"/js/libs/fixtures/task.json"
});
var tasks1 = new myapp.model.Tasks({
completed: 0,
name: "Clear dishes"
}
);
var tasks2 = new myapp.model.Tasks({
completed: 1,
name: "Get out the trash"
}
);
var tasks3 = new myapp.model.Tasks({
completed: 0,
name: "Do the laundry"
}
);
var tasks4 = new myapp.model.Tasks({
completed: 1,
name: "Vacuuming the carpet"
}
);
// collection.tasks.js
myapp.collection.Tasks = Backbone.Collection.extend({
currentStatus : function(status){
return _(this.filter(function(data) {
return data.get("completed") == status;
}));
},
search : function(letters){
if (letters == "") return this;
var pattern = new RegExp(letters,"gi");
return _(this.filter(function(data) {
return pattern.test(data.get("name"));
}));
}
});
myapp.collection.tasks = new myapp.collection.Tasks([tasks1, tasks2, tasks3, tasks4]);
// route.tasks.js
myapp.router.Tasks = Backbone.Router.extend({
routes: {
"": "list",
},
list: function(){
this.listContainerView = new myapp.view.TasksContainer({
collection: myapp.collection.tasks
});
$("#contentContainer").append(this.listContainerView.render().el);
this.listContainerView.sorts()
}
});
myapp.router.tasks = new myapp.router.Tasks;
<!-- render views -->
myapp.view.TasksContainer = Backbone.View.extend({
events: {
"keyup #searchTask" : "search",
"change #taskSorting" : "sorts"
},
render: function(data) {
$(this.el).html(this.template);
return this;
},
renderList : function(tasks){
$("#taskList").html("");
tasks.each(function(task){
var view = new myapp.view.TasksItem({
model: task,
collection: this.collection
});
$("#taskList").append(view.render().el);
});
return this;
},
initialize : function(){
this.template = _.template($("#list_container_tpl").html());
this.collection.bind("reset", this.render, this);
},
search: function(e){
var letters = $("#searchTask").val();
this.renderList(this.collection.search(letters));
},
sorts: function(e){
var status = $("#taskSorting").find("option:selected").val();
if (status == "") status = 0;
this.renderList(this.collection.currentStatus(status));
}
});
myapp.view.TasksItem = Backbone.View.extend({
events: {},
render: function(data) {
$(this.el).html(this.template(this.model.toJSON()));
console.log(this.model.toJSON(), "became", this.template(this.model.toJSON()));
return this;
},
initialize : function(){
this.template = _.template($("#task_item_tpl").html());
}
});
</script>
<script>
// model.facets.js
facetsSearch.model.Facets = Backbone.Model.extend({
default: {
id: 0,
label: "",
facetValues: []
}
});
var facet1 = new facetsSearch.model.Facets({
id: 1,
label: "Organism",
facetValues: ["Orga1", "Orga2"]
});
var facet2 = new facetsSearch.model.Facets({
id: 2,
label: "Omics",
facetValues: ["Omics1", "Omics2"]
});
var facet3 = new facetsSearch.model.Facets({
id: 3,
label: "Publication Date",
facetValues: ["2016-11-01", "2016-11-02"]
});
// collection.facets.js
facetsSearch.collection.Facets = Backbone.Collection.extend({
search : function(letters){
if (letters == "") return this;
/**
* the g modifier is used to perform a global match (find all matches rather than stopping after the first match).
* Tip: To perform a global, case-insensitive search, use this modifier together with the "i" modifier.
*/
var pattern = new RegExp(letters, "gi");
return _(this.filter(function(data) {
return pattern.test(data.get("label"));
}));
}
});
facetsSearch.collection.facets = new facetsSearch.collection.Facets([facet1, facet2, facet3]);
// route.facets.js
facetsSearch.router.Facets = Backbone.Router.extend({
routes: {
"": "list",
},
list: function(){
this.mylistContainerView = new facetsSearch.view.FacetsContainer({
collection: facetsSearch.collection.facets
});
console.log("Facet collection: ", facetsSearch.collection.facets);
$("#contentContainer2").append(this.mylistContainerView.render().el);
this.mylistContainerView.sorts()
}
});
facetsSearch.router.Facets = new facetsSearch.router.Facets;
facetsSearch.view.FacetsContainer = Backbone.View.extend({
events: {
"keyup #searchFacet" : "search",
"change #facetSorting": "sorts"
},
render: function(data) {
$(this.el).html(this.template);
return this;
},
renderList : function(facets){
$("#facetList").html("");
facets.each(function(facet){
var view2 = new facetsSearch.view.FacetsItem({
model: facet,
collection: this.collection
});
$("#facetList").append(view2.render().el);
});
return this;
},
initialize : function(){
this.template = _.template($("#list2_container_tpl").html());
this.collection.bind("reset", this.render, this);
},
search: function(e){
var letters = $("#searchFacet").val();
this.renderList(this.collection.search(letters));
},
sorts: function(e){
/*var status = $("#taskSorting").find("option:selected").val();
if (status == "") status = 0;
this.renderList(this.collection.currentStatus(status));*/
}
});
facetsSearch.view.FacetsItem = Backbone.View.extend({
events: {},
render: function(data) {
$(this.el).html(this.template(this.model.toJSON()));
console.log(this.model.toJSON(), "became", this.template(this.model.toJSON()));
return this;
},
initialize : function(){
this.template = _.template($("#facet_item_tpl").html());
}
});
</script>
<script>
Backbone.history.start();
</script>
</body>
The problem
To display Tasks above Your facets. I created two bunches of codes to render Tasks and Facets but modified the variable names respectively. Unfortunately, the former cannot be displayed.
As Emile mentioned in his detailed answer, your problem is that you're initializing multiple routers with the same route.
Since you seem to be beginning with Backbone, I'll give you a simpler answer than creating a complicated Layout (parent) view:
Just have a single handler for the specific route, and initialize both your views inside it.
It'll look something like:
myapp.router = Backbone.Router.extend({
routes: {
"": "list",
},
list: function() {
this.listContainerView = new myapp.view.TasksContainer({
collection: myapp.collection.tasks
});
$("#contentContainer").append(this.listContainerView.render().el);
this.listContainerView.sorts(); //this can be done inside the view
this.mylistContainerView = new facetsSearch.view.FacetsContainer({
collection: facetsSearch.collection.facets
});
$("#contentContainer2").append(this.mylistContainerView.render().el);
this.mylistContainerView.sorts(); //this can be done inside the view
}
});
You simply initialize 2 views in the same route.
You made 2 routers, both with an empty route. Each route is registered in Backbone.history, so when the facets router is initialized, its route overrides the tasks router route.
How to have multiple routers?
For the scope of your application, you should just start by making a single router, and handling the page with 2 lists within a parent view. Make a sort of Layout view for that page, which will handle the 2 lists:
var Layout = Backbone.View.extend({
template: _.template($('#layout-template').html()),
// keep the selector strings in a simple object
selectors: {
tasks: '.task-container',
facets: '.facet-container',
},
initialize: function() {
this.view = {
tasks: new TaskList(),
facets: new FacetList()
};
},
render: function() {
this.$el.html(this.template());
var views = this.views,
selectors = this.selectors;
this.$(selectors.tasks).append(views.tasks.render().el);
this.$(selectors.facets).append(views.facets.render().el);
return this;
}
});
Then, only one router:
var Router = Backbone.Router.extend({
routes: {
"": "list",
},
list: function() {
this.listContainerView = new Layout();
$("body").html(this.listContainerView.render().el);
}
});
This won't work with your code as-is, you'll have to incorporate the concepts yourself into your app.
Otherwise, if you really want multiple routers, you must understand that they can't share a route and that at any moment, only one route can be triggered.
When you have multiple routers, each manages the routes of a single module.
var TaskRouter = Backbone.Router.extend({
routes: {
'tasks': 'taskList',
'tasks/:id': 'taskDetails'
}
// ...snip...
});
var FacetsRouter = Backbone.Router.extend({
routes: {
'facets': 'facetList',
'facets/:id': 'facetDetails'
}
// ...snip...
});
Other improvements
Compile the template once
It's more efficient to compile the template once, when the view is being extended, than each time a new view is initialized.
myapp.view.TasksContainer = Backbone.View.extend({
// gets compiled once
template: _.template($("#list_container_tpl").html()),
initialize: function() {
// not here, as it gets compiled for each view
// this.template = _.template($("#list_container_tpl").html())
},
});
Avoid the global jQuery function
Avoid $(this.el) in favor of this.$el.
Avoid $('#divInTemplate') in favor of this.$('.divInTemplate'). It's a shortcut to this.$el.find.
See What is the difference between $el and el for additional informations.
Cache the jQuery objects
Whenever you want to select a child of the view's element, do it once and put the result in a variable.
render: function(data) {
this.$el.html(this.template);
// I like to namespace them inside an object.
this.elements = {
$list: this.$('.task-list'),
$search: this.$('.task-sorting')
};
// then werever you want to use them
this.elements.$list.toggleClass('active');
return this;
},
Use listenTo
Avoid bind/unbind and on/off/once (aliases) in favor of listenTo/stopListening/listenToOnce.
listenTo is an improved version of bind which solves problem with memory leaks.
this.collection.bind("reset", this.render, this);
// becomes
this.listenTo(this.collection, "reset", this.render);
Pass an array of objects to collection
myapp.collection.Tasks = Backbone.Collection.extend({
model: myapp.model.Tasks
// ...snip...
});
myapp.collection.tasks = new myapp.collection.Tasks([{
completed: 0,
name: "Clear dishes"
}, {
completed: 1,
name: "Get out the trash"
}, {
completed: 0,
name: "Do the laundry"
}, {
completed: 1,
name: "Vacuuming the carpet"
}]);
This would be enough, Backbone collection takes care of the rest.

Not showing model defaults in template

I have the following backbone application:
On the index.html:
<div class='content'></div>
<div class='container'>
<script type="type="text/x-handlebars-template"" id="product-template">
<h2>Products</h2>
<h3>{{ this.title }}</h3>
</script>
</div>
and the main.js:
$(function() {
var Product = Backbone.Model.extend({
defaults: {
title: "Title",
user_id: 0,
description: "Description"
}
});
var ProductView = Backbone.View.extend({
el: ".content",
initialize: function() {
this.render();
},
render: function() {
var source = $('#product-template').html();
var template = Handlebars.compile(source);
var html = template(Product.model);
this.$el.html(html);
}
});
var productView = new ProductView();
});
It's showing the "Products" heading, so the template is rendering but it's not showing the {{this.title }}. Unfortunately, there isn't any errors showing up in the console, either.
try this:
var ProductView = Backbone.View.extend({
el: ".content",
model: new Product,
initialize: function() {
this.render();
},
render: function() {
var source = $('#product-template').html();
var template = Handlebars.compile(source);
var html = template(this.model.toJSON());
this.$el.html(html);
}
});
to print it
{{ title }}

backbone/marioneete: templateHelpers not working

I find that when using templateHelpers and set it as a function, it is not displaying at all.
But when I use a variable inside the templateHelper, it is displaying. Basically what they have in this link https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.view.md#viewevents, it is not working on my end.
The jsfiddle is in here http://jsfiddle.net/gerlstar/Ms7uN/2/
model2 = Backbone.Model.extend({
defaults: {
age: '',
name: ''
},
initialize: function () {
this.set({
name: "Terry"
});
}
});
someview = Marionette.ItemView.extend({
tagName: "div",
template: "#tpl-box",
templateHelpers: {
showMessage: function () {
return " is the coolest!";
}
}
});
var app = new Marionette.Application();
app.container = new Backbone.Marionette.Region({
el: "#container"
});
app.layout = new Backbone.Marionette.Layout.extend({
template: "#tpl-layout",
region: {
rgn: "#rgn1"
}
});
var m = new model2();
var view2 = new someview({
model: m
});
app.on("initialize:after", function() {
layout = new app.layout();
app.container.show(layout);
layout.rgn.show(view2);
});
app.start();
HTML
<div id="container" class="container"></div>
<script id="tpl-box" type="text/html">
<%= name %>
</script>
<script id="tpl-layout" type="text/html">
< h3 > My layout < /h3>
<div id="rgn1">
</div >
</script>
Here is your fixed fiddle http://jsfiddle.net/pSv9h/
You had two problem:
1. new keyword when defining your layout,
You shouldn't use the new keyword when extending a backbone/marionnete class.
app.layout = Backbone.Marionette.Layout.extend instead of app.layout = new Backbone.Marionette.Layout.extend
2. regions not region
You need to define your regions inside of regions not region

Why all but 1 Route is working with Backbone Router

In the script below are various routes and view and routes events built with Backbone.js
Why is it, that all of the routes work as I expect except the last one 'products'.
I originally had it as a very different function but realized it wasn't firing off, but not even as a duplicate of the other views and routes it still wont work.
Anyone have an idea why?
Thanks you!
I am also very new to Backbone.
Rich
<!doctype html>
<html>
<head>
<title>Undie Couture by Lauren Copeland</title>
<link type="text/css" rel="stylesheet" href="/assets/css/museosans_500_macroman/stylesheet.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/bootstrap/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/assets/css/site/front-styles.css" />
</head>
<body>
<div id="wrapper">
<div class="content">
<header>
<div class="container">
<div id="logo"></div>
<nav>
<ul>
<li>shop</li>
<li>contact</li>
<li>about</li>
<li>wholesale</li>
</nav>
</nav>
</div>
</header>
<div class="container">
<div class="page" id="first" style="display:none;"></div>
<div class="page"></div>
</div>
</div>
</div>
</body>
<script type="text/template" id="title-temp">
<%= title %>
</script>
<script type="text/template" id="logo-temp">
<img src="/assets/img/logo-strip.png" />
</script>
<script type="text/template" id="home-temp">
<%= title %>
</script>
<script type="text/template" id="page-temp">
<h1><%= page.pluck('title') %></h1>
<div id="body">
<%= page.pluck('body') %>
</div>
</script>
<script type="text/template" id="product-temp">
<h1><%= page.pluck('name') %></h1>
<div id="body">
<%= page.pluck('description') %>
</div>
</script>
<script type="text/javascript" src="/assets/js/libs/jquery/jquery.js"> </script>
<script type="text/javascript" src="/assets/js/libs/underscore/underscore.js"></script>
<script type="text/javascript" src="/assets/js/libs/backbone/backbone-min.js"></script>
<script type="text/javascript" src="/assets/js/libs/bootstrap/bootstrap.js"></script>
<script type = "text/javascript">
var Router = Backbone.Router.extend({
routes: {
"home": "home",
"about": "about",
"contact": "contact",
"wholesale": "wholesale",
"products": "products"
}
});
var Page = Backbone.Model.extend({
initialize: function() {
console.log('Page model loaded');
},
defaults: {
"id": "",
"title": "",
"body": "",
"slug": ""
},
urlRoot: '/backbone/page'
});
var Pages = Backbone.Collection.extend({
initialize: function() {
console.log('pages collection loaded');
},
url: '/backbone/page'
});
var HomeView = Backbone.View.extend({
template: $('#standard').html(),
el: '.page:first',
change: function() {
$('.page').fadeOut('slow');
},
render: function() {
logo = $('#logo-temp').html();
$('#logo').html(logo);
$('.content').attr('id', 'home');
var that = this;
that.change();
compiled = _.template($('#home-temp').html(), {
title: ''
});
that.$el.html(compiled);
}
});
var AboutView = Backbone.View.extend({
template: $('#standard').html(),
el: '.page:first',
change: function() {},
render: function() {
console.log('render')
var that = this;
logo = $('#logo-temp').html();
$('#logo').html(logo);
$('.content').attr('id', 'about');
aboutPage = new Pages();
aboutPage.fetch({
data: {
id: 3
},
success: function() {
$('#first').fadeOut({
duration: 400,
complete: function() {
console.log(aboutPage.models)
compiled = _.template($('#page-temp').html(), {
page: aboutPage
});
that.$el.html(compiled).delay(300).fadeIn();
}
});
}
});
}
});
var ContactView = Backbone.View.extend({
template: $('#standard').html(),
el: '.page:first',
change: function() {
$('.page').fadeOut();
},
render: function() {
var that = this;
logo = $('#logo-temp').html();
$('#logo').html(logo);
$('.content').attr('id', 'contact');
contactPage = new Pages();
contactPage.fetch({
data: {
id: 2
},
success: function() {
$('#first').fadeOut({
duration: 400,
complete: function() {
console.log(contactPage.models)
compiled = _.template($('#page-temp').html(), {
page: contactPage
});
that.$el.html(compiled).delay(300).fadeIn();
}
});
}
});
}
});
var WholesaleView = Backbone.View.extend({
template: $('#standard').html(),
el: '.page:first',
change: function() {},
render: function() {
console.log('render')
var that = this;
logo = $('#logo-temp').html();
$('#logo').html(logo);
$('.content').attr('id', 'about');
wholePage = new Pages();
wholePage.fetch({
data: {
id: 4
},
success: function() {
$('#first').fadeOut({
duration: 400,
complete: function() {
console.log(wholePage.models)
compiled = _.template($('#page-temp').html(), {
page: wholePage
});
that.$el.html(compiled).delay(300).fadeIn();
}
});
}
});
}
});
var ProductView = Backbone.View.extend({
template: $('#standard').html(),
el: '.page:first',
change: function() {},
render: function() {
var that = this;
logo = $('#logo-temp').html();
$('#logo').html(logo);
$('.content').attr('id', 'about');
wholePage = new Pages();
wholePage.fetch({
data: {
id: 4
},
success: function() {
$('#first').fadeOut({
duration: 400,
complete: function() {
console.log(wholePage.models)
compiled = _.template($('#page-temp').html(), {
page: wholePage
});
that.$el.html(compiled).delay(300).fadeIn();
}
});
}
});
}
});
var router = new Router();
var page_model = new Page();
var page_col = new Pages();
var home = new HomeView();
var about = new AboutView();
var contact = new ContactView();
var wholesale = new WholesaleView();
var products = new ProductView();
router.on('route:home', function() {
home.render();
});
router.on('route:about', function() {
about.render();
});
router.on('route:contact', function() {
contact.render();
});
router.on('route:wholesale', function() {
wholesale.render();
});
router.on('route:products', function() {
products.render();
});
Backbone.history.start();
</script>
Your anchor tag for shops has a trailing /
<a href="/#/products/">
Should be
<a href="/#/products">
Removing that made the route work for me.

Backbone.js - Get JSON array into view template

window.User = Backbone.Model.extend({
defaults: {
name: 'Jane',
friends: []
},
urlRoot: "users",
initialize: function(){
this.fetch();
}
});
var HomeView = Backbone.View.extend({
el: '#container',
template: _.template($("#home-template").html()),
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
home: function() {
var user = new User({id: 1});
this.homeView = new HomeView({
model: user
});
this.homeView.render();
},
The model data is being queried and the root level attributes work fine, but the attribute that contains an array of other objects doesn't seem to show up.
Template:
<script id="home-template" type="text/template">
<div id="id">
<div class="name"><%= name %></div>
<br />
<h3> Single Friends</h3>
<br />
<ul data-role="listview" data-inset="true", data-filter="true">
<% _.each(friends, function(friend) { %>
<li>
<a href="/profile?id=<%= friend.id %>", data-ajax="false">
<div class="picture"><img src="http://graph.facebook.com/<%= friend.fb_user_id %>/picture"></div>
<div class="name"><%= friend.name %></div>
</a>
</li>
<% }); %>
</ul>
</div>
</script>
Return JSON:
{"name":"John Smith","friends":[{"id":"1234","name":"Joe Thompson","fb_user_id":"4564"},{"id":"1235","name":"Jane Doe","fb_user_id":"4564"}]}
It almost seems like it's not seeing the .friends attribute at all because it's taking the defaults of the model ([]).
Any suggestions?
You are calling render() before fetch() has returned the data from the server.
Try this?
window.User = Backbone.Model.extend({
defaults: {
name: 'Jane',
friends: []
},
urlRoot: "users"
});
var HomeView = Backbone.View.extend({
el: '#container',
template: _.template($("#home-template").html()),
initialize: function() {
this.model.fetch();
this.model.bind('change', this.render, this);
}
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});

Categories