I've just started using Backbone.js. I want to create a Collection and add some data from an external source.
The data is actually currently in CSV, not JSON, but I could re-render it in JSON if that is going to be a lot easier.
So, two questions:
Where do I bind external data to the Collection? It complains if I don't specify a url property, but I don't really have a URL in mind - I was planning to bind data via Ajax.
Should I re-render my data in JSON, rather than CSV, and use the Collection's url property to load it?
I just tried loading data directly into the Collection, rather than via the url property:
var Cat = Backbone.Model.extend({});
var CatCollection = Backbone.Collection.extend({
model: Cat
});
var ajaxData = { 'breed' : 'persian' } // simple example of external data
var catCollection = new CatCollection(ajaxData);
catCollection.fetch();
But this gives an error: Uncaught Error: A "url" property or function must be specified.
Either initialize/reset your collection with an array created elsewhere without using the fetch method for your collection
var ajaxData = [{ 'breed' : 'persian' }]; // Backbone.Collection expects an array
var catCollection = new CatCollection(ajaxData);
// catCollection.fetch(); fetch will try to update the data from the server
or use the built-in url/parse to build your models
var CatCollection = Backbone.Collection.extend({
model: Cat,
url: "your ajax source",
parse: function (csv) {
//convert your csv in an array of objects
return csvtoarray;
},
fetch: function (options) {
options = options || {};
options.dataType = "text";
return Backbone.Collection.prototype.fetch.call(this, options);
}
});
var catCollection = new CatCollection();
catCollection.fetch();
Converting your data server-side to JSON will probably be easier than trying to write a CSV parser in JS.
Related
I have a collection which is fetched from a REST endpoint, where it receives a JSON.
So to be completely clear:
var Products = Backbone.Collection.extend({
model: Product,
url : 'restendpoint',
customFilter: function(f){
var results = this.where(f);
return new TestCollection(results);
}
});
var products = new Products();
products.fetch();
If I log this, then I have the data. However, the length of the object (initial) is 0, but it has 6 models. I think this difference has something to do with what is wrong, without me knowing what is actually wrong.
Now, if I try to filter this:
products.customFilter({title: "MyTitle"});
That returns 0, even though I know there is one of that specific title.
Now the funky part. If I take the ENTIRE JSON and copy it, as in literally copy/paste it into the code like this:
var TestCollection = Backbone.Collection.extend({
customFilter: function(f){
var results = this.where(f);
return new TestCollection(results);
}
});
var testCollectionInstance = new TestCollection(COPY PASTED HUGE JSON DATA);
testCollectionInstance.customFilter({title: "MyTitle"});
Now that returns the 1 model which I was expecting. The difference when I log the two collections can be seen below. Is there some funky behaviour in the .fetch() I am unaware of?
Edit 2: It may also be of value that using the .fetch() I have no problems actually using the models in a view. It's only the filtering part which is funky.
Edit 3: Added the view. It may very well be that I just don't get the flow yet. Basically I had it all working when I only had to fetch() the data and send it to the view, however, the fetch was hardcoded into the render function, so this.fetch({success: send to template}); This may be wrong.
What I want to do is be able to filter the collection and send ANY collection to the render method and then render the template with that collection.
var ProductList = Backbone.View.extend({
el: '#page',
render: function(){
var that = this; /* save the reference to this for use in anonymous functions */
var template = _.template($('#product-list-template').html());
that.$el.html(template({ products: products.models }));
//before the fetch() call was here and then I rendered the template, however, I needed to get it out so I can update my collection and re-render with a new one (so it's not hard-coded to fetch so to speak)
},
events: {
'keyup #search' : 'search'
},
search : function (ev){
var letters = $("#search").val();
}
});
Edit: New image added to clearify the problem
It's a bit tricky, you need to understand how the console works.
Logging objects or arrays is not like logging primitive values like strings or numbers.
When you log an object to the console, you are logging the reference to that object in memory.
In the first log that object has no models but once the models are fetched the object gets updated (not what you have previously logged!) and now that same object has 6 models. It's the same object but the console prints the current value/properties.
To answer your question, IO is asynchronous. You need to wait for that objects to be fetched from the server. That's what events are for. fetch triggers a sync event. Model emits the sync when the fetch is completed.
So:
var Products = Backbone.Collection.extend({
model: Product,
url : 'restendpoint',
customFilter: function(f){
var results = this.where(f);
return new TestCollection(results);
}
});
var products = new Products();
products.fetch();
console.log(products.length); // 0
products.on('sync',function(){
console.log(products.length); // 6 or whatever
products.customFilter({title: 'MyTitle'});
})
It seems like a response to your ajax request hasn't been received yet by the time you run customFilter. You should be able to use the following to ensure that the request has finished.
var that = this;
this.fetch({
success: function () {
newCollection = that.customFilter({ title: 'foo' });
}
});
Ahoy everyone!
Good day! I'm starting to adapt the Backbone.js framework and I'm having a slippery grasp on how the Model's URL:
var TodoItem = Backbone.Model.extend({
urlRoot: 'http://localhost:3354/api/todo/GetAllTodo' // this guy right here
}
affects the Collection's URL - once the said model is used in collection:
var TodoList = Backbone.Collection.extend({
model: TodoItem,
url: 'http://localhost:3354/api/todo/DosomethingElse' //Conflict of URL?
}
Lastly, when I try the model.fetch(), the service returns a JSON representation of the data via [{}] format, this makes my model have an object property which houses the actual json data returned - this is a problem - as models are intended for a single record and not an array[] of data.
Thanks for your time and I really appreciate your help on this.
If you check Backbone source code for Model.url , you'll see that the url base for a model is built by
var base = _.result(this, 'urlRoot') || _.result(this.collection, 'url');
which means your TodoItem.urlRoot takes precedences over TodoList.url when you do a model.fetch()
You can use parse to extract the desired format:
var TodoItem = Backbone.Model.extend({
urlRoot: 'http://localhost:3354/api/todo/GetAllTodo',
parse: function(data) {
return data[0];
}
}
HI my basic model which fetches data from server is working perfect. I want to implement a search feature. When user enters any data the request goes to browser and desired model is returned.
var Book = Backbone.Model.extend({
urlRoot: '/books'
});
render: function(options) {
books = new Book({id:options.name});
books.fetch();
}
where
name = "search/"+dynamic_data;
Request URL that is being formed when i pass --> 'life' in variable dynamic_data
http://host/path/search%2Flife
Request URL that i want
http://host/path/search/life
How can I encode/escape my string to achieve the desired result. I have tried escape(), encodeURI(), encodeURIComponents
A workaround to solve this is create one more model with urlRoot as /books/search and pass just name . I don't think this is correct. Should I use this ?
According to your additionnal precisions stating that life is actually a book name...
It looks like Backbone is better integrated with RESTful API's. In REST, your urls should not contain verbs and to search books, you would do a GET /books/?name=life.
In that case, you would only have to define a Backbone.Collection like:
var BooksCollection = Backbone.Collection.extend({
model: Book,
url: '/books'
});
The to fetch books:
var books = new BooksCollection();
books.fetch({data : {name: 'life'}}); //GET /books/?name=life
If you really want your search operation to target /search/:name, you will have to check the Backbone.Collection api, but I think you will want to look at http://backbonejs.org/#Sync
You could override your collection's sync method to something like:
Backbone.Collection.extend({
...
sync: function (method, model, options) {
//for read operations, call the search url
if (method === 'read') {
options.url = '/search/' + options.data.name;
delete options.data.name;
}
//call the default sync implementation
return Backbone.Collection.prototype.sync.apply(this, arguments);
}
});
In this cased calling books.fetch({data : {name: 'life'}}); will result in GET /books/life.
Here's a fiddle that shows the example.
this would work:
books = new Book({id:options.name}, {url: options.name));
decodeURIComponent() will decode http://host/path/search%2Flife to http://host/path/search/life.
I have an API that filters a set of objects based on the ID present in the URL, like so:
http://localhost:8000/api/v1/goal_update/?goal__id=12&format=json
I have a collection that does a GET request on the above URL. Here is the code for the collection:
var GoalUpdateList = Backbone.Collection.extend({
// Reference the Goal Update model
model: GoalUpdate,
// Do HTTP requests on this endpoint
url: function() {
return "http://localhost:8000/api/v1/goal_update/?goal__id=" + this.goal_id + "&format=json";
},
// Set the goal ID that the goal update list corresponds to
initialize: function(goal_id) {
this.goal_id = goal_id;
},
});
I want to pass in the ID when I create a new instance of the collection, so I created a view that has this code:
this.collection = new GoalUpdateList(this.model.get("id"));
It thinks that I am passing in model parameters, though. I am trying to pass in information that tells the collection what URL to use. So it runs the ID through a validate function and messes up the rest of the backbone code.
Backbone's collections expect model data as the first parameter, as you've already noted. But you can specify a second parameter as an object literal, like other Backbone objects. Just pass null or undefined as the first parameter, and then in your collection initialize method, get the options as the second parameter.
GoalUpdateList = Backbone.Collection.extend({
initialize: function(data, options){
this.goal_id = options.goal_id;
}
});
new GoalUpdateList(null, model.get("goal_id"));
I have a collection which holds some of the users. Some information that is needed is how many total there are, how many pages, etc. How do I pass these back to the client? Or do they have to come from a separate view in which case I will need more than one ajax call? I'd like to have the collection fetch() and also receive some of this "meta data". What's a good way for handling this?
Generally, you need to handle this in the collection class' parse method. Its responsibility is to take the response and return back an array of model attributes. However, you could do more than that if you wished if you didn't mind the parse method having this additional responsibility.
UserList = Backbone.Collection.extend({
model: User,
url: '/users',
parse: function(data) {
if (!data) {
this.registered_users = 0;
return [];
}
this.registered_users = data.registered_users;
var users = _(data.users).map(
function(user_data) {
var user = {};
user['name'] = user_data.name;
return user;
}
);
return users;
}
});
So in the trivial example above, presume the server returns a response which contains a count of registered users and and an array of user attributes. You would both parse through and return the user attributes and you would pick off the registered user count and just set it as a variable on the model.
The parse method would get called as part of a fetch. So no need to modify the fetch, just use the built-in hook method that you have.
Purists would say that you are giving the parse method a secondary responsibility which might surprise some people (e.g. returning something and modifying model state). However, I think this is okay.
One way to do this is to override the Collection::fetch() method so that it parses this metadata out of the response. You could have your backend return a response like this:
{
"collection": [
{ ... model 1 ... },
{ ... model 2 ... },
...
],
"total_rows": 98765,
"pages": 43
}
In your fetch method which overrides the original Backbone.Collection::fetch() method, you can handle each property of the object separately. Here's you could do the override with a slightly modified fetch method:
_.extend(Backbone.Collection.prototype, {
fetch : function(options) {
options || (options = {});
var collection = this;
var success = options.success;
options.success = function(resp) {
// Capture metadata
if (resp.total_rows) collection.total_rows = resp.total_rows;
if (resp.pages) collection.pages = resp.pages;
// Capture actual model data
collection[options.add ? 'add' : 'refresh'](
collection.parse(resp.collection), options);
// Call success callback if necessary
if (success) success(collection, resp);
};
options.error = wrapError(options.error, collection, options);
(this.sync || Backbone.sync).call(this, 'read', this, options);
return this;
});
Note that this approach using _.extend will affect all your classes which extend Backbone.Collection.
This way, you don't have to make 2 separate calls to the backend.
I would bootstrap the information at pagecreation. Write the information into the html document when the server creates the site. Like that you don't have to have an ajax call at all. I do that with the whole collection in ordner not to first load the page and then wait for the ajax call to return the information needed.
Code example with Python:
Line 64: https://github.com/ichbinadrian/maps/blob/master/python/main.py <- from here
Line 43: https://github.com/ichbinadrian/maps/blob/master/templates/index.html <- into here