We Keep Coding

Rendering returned fetched JSON data in Backbone.js

I am new to Backbone.js so please bear with me.
I have the following code that correctly fetches JSON onSearchClicked. I can see the JSON in the console view. I would like to render the retrieved responseJSON to a view or pass the data through an existing model (under car_view.js) - so I can view on a HTML page. How can I do this?
Any help much appreciated.
view.js
--------------
var View = Backbone.View.extend({
tagName: 'div',
ranking: 0,
events:{
'click .search-button': 'onSearchClicked'
},
onSearchClicked : function(){
var searchString = $('.search-field input').val();
$('#gallery ul').empty();
var search = new carCollection([], {query: searchString});
search.fetch( {success: this.searchResults.bind(this) });
console.log(search.fetch());
},
},
search_collection.js
--------------
var Backbone = require('backbone');
var BurgerModel = require('../models/car');
var CarCollection = Backbone.Collection.extend({
model:CarModel,
initialize : function(models, options){
this.query = options.query;
},
url: function(){
return "/api/cars?name="+this.query;
}
});
module.exports = CarCollection;
car_view.js
--------------
carCard: function( burger ){
var carView = new CarView({
model: car
});
this.$el.append( carView.el );
},

There is a typo - Make 'C' capital in this line:
var search = new carCollection([], {query: searchString});
I am not going to provide the working code but I can provide you steps:
Please create a new class CarList which should have a reference to CarCollection
When User enters search query, a method of CarList should be invoked in which you should call fetch of collection
In success callback of fetch invoke a method renderCars
Inside renderCars For each search result create an instance of CarView and render it in an element.
Hope this is what you want. If you are looking for exact code, then nobody is going to help you on SO!!

delegateEvents not working as expect when using back button

Below is my backbone view.
define([
'app',
'backbone',
'twig',
'templates/report',
'data/reportViewCollection',
'data/reportViewModel'
], function (app, Backbone, Twig, template, Collection, Model) {
var collection = new Collection();
var fetching;
return Backbone.View.extend({
setParams: function (rlId, viewId, categoryId, depth) {
// reset any possible pending previous repests.
fetching = false;
var model = collection.getModel(rlId, viewId, categoryId, depth);
if (!model) {
model = new Model({
rlId: rlId,
viewId: viewId,
categoryId: categoryId,
depth: depth
});
fetching = model.fetch({
success: function (model) {
collection.add(model);
},
error: function (model) {
alert('error getting report view');
}
});
}
this.model = model;
},
render: function () {
var that = this;
var done = function() {
app.vent.trigger('domchange:title', that.model.get('title'));
that.$el.html(Twig.render(template, that.model.toJSON()));
that.delegateEvents(that.events);
fetching = false;
};
if (fetching) {
app.loading(this);
fetching.done(done);
} else {
done();
}
return this;
},
events: {
'change select.view-select': 'viewSelect',
'click #dothing': function (e) {e.preventDefault(); alert('hi');}
},
viewSelect: function(e) {
var selectedView = $(e.target).val();
var rlId = this.model.get('rlId');
if (!rlId) rlId = 0;
var url = 'report/' + rlId + '/' + selectedView;
console.log(this, e, url);
Backbone.history.navigate(url, {trigger: true});
}
});
});
Description of functionality:
What happens is when a specific url is navigated to, the setParams() function is called to fetch the model from the server. When the render method is called, it checks if we are currently fetching the model and if so, uses sets a deferred callback to render the template when it gets done fetching. When the model is fetch-ed and we are ready to render, renders the template and fills in the view by that.$el.html().
Problem:
What happens is that my events work perfectly the first time I navigate to a url, but when I hit the back button, my events don't get attached.
I've stepped through the code and can't see any differences. The only real difference is that I'm loading the model from the cached collection immediately instead of doing an ajax request to fetch it.
Any clues what is going on?

try to change:
that.$el.html(Twig.render(template, that.model.toJSON()));
to
that.$el.html("");
that.$el.append(Twig.render(template, that.model.toJSON()));
had kind the same problem and this fixed it.

I resolved my issue. The comment by #mu set me in the right direction.
I am using Marionette and my view is contained in a region. In the Region's open function, it is doing this.$el.html(view.el); which wipes out the events in certain circumstances. I'm still not sure why it does in some but on in others.
The Solution proved to be to add an onShow function to my view that call's this.delegateEvents(). Everything is working smoothly now!
I eventually figured it out by stepping through the code and watching the events registered on the view's div.

Backbone saving model list to collection

I'm trying to add a list of models to a collection to be stored locally. I don't fully understand backbone yet which is really the cause of this problem.
I basically pull in an RSS feed, assign each item in the feed to a Model and try place the list of Models into a collection so I can iterate over them later.
I am getting an error saying that I need to specify a Url for the collection.
It would be brilliant if someone could explain to me the correct process I need to follow to achieve my goal.
Currently I have:
var DetailIndividual = Backbone.Model.extend();
var DetailsIndividual = Backbone.Collection.extend({
model: DetailIndividual
});
var Search = Backbone.View.extend({
events: {
'click a.individualCast' : 'pullIndividual'
},
initialize: function() {
this.detailsIndividual = new DetailsIndividual();
_this = this;
this.detailsIndividual.bind('reset', function(collection) {
collection.each(function(item) {
//code to handle update
});
});
},
pullIndividual: function(e){
e.preventDefault();
//Logic to pull in RSS feed
for (var i = 0; i < result.feed.entries.length; i++) {
entry[i] = new DetailIndividual({ title: result.feed.entries[i].title, link: result.feed.entries[i].link, });
}
this.detailsIndividual.add(entry);
}
});

The error is reported out from here,because model must have url attribute:
http://backbonejs.org/docs/backbone.html#section-167
do you model have url attribute?

The reason why you're getting the error is because you're binding the 'reset' event. 'reset' is only fired on a collection.fetch or an explicit call to collection.reset, and in your case you're never fetching from the server with your collection - I'm assuming from your code you already have the feed in memory - so unless you're explicitly resetting, there's no need to listen for the reset.
In your code, you're not really extending Collection and Model, so it's actually not necessary to make extended objects - just use Backbone.Collection. You don't even need to create a Model extension because by default, when you add a JSON, a Backbone.Model is automatically created. It's only necessary to assign the collection.model if you're creating a truly custom model (with method overrides and additions).
Here's a way you could load your collection:
var search = Backbone.View.extend({
events: {
'click a.individualCast' : 'pullIndividual'
},
initialize: function() {
this.detailsIndividual = new Backbone.Collection();
},
pullIndividual: function(e) {
e.preventDefault();
//Logic to pull in RSS feed
for (var i = 0; i < result.feed.entries.length; i++) {
this.detailsIndividual.add({
title: result.feed.entries[i].title,
link: result.feed.entries[i].link
});
}
}
});
You didn't provide any code of how you wanted to parse collection (except in the 'reset'), but essentially you'd load the collection from the feed as shown.

Retrieving Specific Data From JSON Using a Backbone Model

I am creating a client view of an application and I need help with retrieving specific data from my JSON file. I am using Backbone.js along with Underscore.js to achieve this.
(function($) {
window.Node = Backbone.Model.extend({
getName: function(){
return this.get('Name');
}
});
window.Nodes = Backbone.Collection.extend({
model:Node,
url: '/packageview.json'
});
window.NodeView = Backbone.View.extend({
tagName: "div",
className: "package-template",
events:{
"click #display-name" : "displayname",
},
//.. I have a render and initialize function here which should not be a concern
displayname: function(){
var node = new Node();
alert(node.getName()); //trying to alert
},
});
});
I am trying to get the name from model and alert it. I have a button in my html with an id, and when I press that button I get "undefined" as an alert. Here is how my JSON file looks:
{
"Id": 2,
"Name": "Some Package",
"IsComplete": false,
"IsNodeTagComplete": false
}
I think I am making a silly mistake somewhere. Am I expecting way to much from model?

What I am doing here is this
window.jsonAccess = Node.extend({ // Here Node is my above mentioned model
getJSON: function(){
var collection = nodeInstance.toJSON(); // nodeInstance is an instance of my collection Nodes
return collection; //returns JSON
}
});
jAccess = new jsonAccess();
So here is what I am doing to access the JSON
getNodeId: function(){ //Function to get Node Id from JSON
objectJSON = jAccess.getJSON(); // Get JSON
_.each(objectJSON, function(action){
_.each(action.Nodes, function(action){
This solves my purpose but not quite the way getters would be used in backbone.

Since a lot of context is missing I too may be making a mistake but here's my guess - you are creating an empty Node Model. Try doing something like this in display:
displayName: function() {
var myJSON = window.getJSONObject(); //wherever your json object is or how to get it...
var node = new Node({
id:myJSON.Id,
name:myJSON.Name,
isComplete: myJSON.IsComplete,
...
});
alert(node.get('name'));
alert("Getter: "+node.getName()); //your version...
}
This is just a hunch though...maybe I'm missing your context but this seems to be the case for now...

Backbone set collection attribute (for the url)

I need to pass an id to a collection for use in the url (e.g. /user/1234/projects.json) but am not sure how to do this, an example would be wonderful.
The way my application is structured is on launch a collection of 'users' is pulled and rendered, I then want when a user is clicked their 'documents' are pulled from the server into a new collection and rendered in a new view. The issue is getting the user id into the documents collection to give the relevant URL for the documents.fetch().
think I've got it, here is an example:
//in the the view initialize function
this.collection = new Docs();
this.collection.project_id = this.options.project_id;
this.collection.fetch();
//in the collection
url: function() {
return '/project/api/' +this.project_id+'/docs';
}

Your user collection url should be set to /user. Once that's set, your models should utilize that url in order to do their magic. I believe (not completely positive) that if a model is in a collection, calling the 'url' method will return /user/:id. So all your typical REST-ish functionality will be utilized on '/user/:id'. If you are trying to do something with a relationship (a user has many documents) it's kind of rinse and repeat. So, for your documents collection (which belogs to user correct?) you'd set the url to 'user_instance.url/documents'.
To show a one to many relationship with a backbone model, you'd do something like this (upgrade to backbone 0.5.1 for urlRoot):
var User = Backbone.Model.extend({
initialize: function() {
// note, you are passing the function url. This is important if you are
// creating a new user that's not been sync'd to the server yet. If you
// did something like: {user_url: this.url()} it wouldn't contain the id
// yet... and any sync through docs would fail... even if you sync'd the
// user model!
this.docs = new Docs([], {user_url: this.url});
},
urlRoot: '/user'
});
var Doc = Backbone.Model.extend();
var Docs = Backbone.Collection.extend({
initialize: function(models, args) {
this.url = function() { args.user_url() + '/documents'; };
}
});
var user = new User([{id: 1234}]);
user.docs.fetch({ success: function() { alert('win') });

Why do you need to override the URL property of the collection with a function?.. you could do:
this.collection = new Docs();
this.collection.project_id = this.options.project_id;
this.collection.url = '/project/api/' + this.options.project_id + '/docs';
this.collection.fetch();

I like the answer from Craig Monson, but to get it working I needed to fix two things:
Binding the User url method before passing it to the Docs
A return statement from the url function in Docs
Updated example:
var User = Backbone.Model.extend({
initialize: function() {
// note, you are passing the function url. This is important if you are
// creating a new user that's not been sync'd to the server yet. If you
// did something like: {user_url: this.url()} it wouldn't contain the id
// yet... and any sync through docs would fail... even if you sync'd the
// user model!
this.docs = new Docs([], { user_url: this.url.bind(this) });
},
urlRoot: '/user'
});
var Doc = Backbone.Model.extend();
var Docs = Backbone.Collection.extend({
initialize: function(models, args) {
this.url = function() { return args.user_url() + '/documents'; };
}
});
var user = new User([{id: 1234}]);
user.docs.fetch({ success: function() { alert('win') });