So I'm using backbone.js like so:
window.TicketCollection = Backbone.Collection.extend({
model:Tickets,
url:"/index.php/tickets/viewJSON"
});
Depending on the page I want to pass a subfolder like so:
ticketList.fetch({ data: "a1103" });
which would then append to url and fetch the data from the following:
/index.php/tickets/viewJSON/a1103
How is this possible?
window.TicketCollection = Backbone.Collection.extend({
subFolder : 'defaultFolder',
url:function(){
return "/index.php/tickets/viewJSON/" + this.subFolder;
}
});
var some = new window.TicketCollection();
some.subFolder = 'a1103';
some.fetch();
Related
Is it possible to override the url method of a backbone model to insert the id in the middle of the url string.
I.e. I dont want to fetch from this
documents/6
but this
documents/6/editor
and similiary update to
documents/6/editor
Currently backbone insists on always appending the id to the end of the url string.
I tried
urlRoot: function(){
return "/documents" + this.id + "/editor";
}
Whilst this works for fetching a model from the server it fails on updates. It seems to be trying the url
/documents/6/editor/6
and not
/documents/6/editor
Overriding Model.urlRoot alters the prefix of your url and is later used in Model.url
Try
var M = Backbone.Model.extend({
urlRoot: '/documents',
url: function() {
var base = Backbone.Model.prototype.url.call(this);
if (this.isNew()) return base;
return base+'/editor';
}
});
And a demo http://jsfiddle.net/nikoshr/pjr81pLd/
In my base collection i have the base path, from the base path i am extending further urls.. but while i console the url in the extended collection i am not getting the full path of the url..
instead just i am getting the url - what the extended collection have.. why i am getting like so, and what should be the proper approach?
here is my try :
BaseCollection = Backbone.Collection.extend({
path: 'http://path/to/api'
});
TeachersCollection = BaseCollection.extend({
url:"xyz/abc",
initialize:function(){
console.log(this.url);//xyz/abc - why i am getting like this instead of full path?
//full url should be 'http://path/to/api/xyz/abc' - how can i get like this..?
}
});
var x = new TeachersCollection;
live demo
path is not a special property on any of Backbone's classes
Models can have urlRoot, but there's no such thing for collections
Here's an approach that should work for you:
TeachersCollection = BaseCollection.extend({
url:function() {
return this.path + "/xyz/abc"
},
initialize:function(){
// this.url = _.result(this, 'url');
console.log(_.result(this, 'url'));
}
});
You may actually want to think about changing the constructor on your base collection, like this if you're going to be extending it a lot:
BaseCollection = Backbone.Collection.extend({
constructor: function() {
this.url = 'http://path/to/api' + this.url;
Backbone.Collection.prototype.constructor.apply(this, arguments);
}
});
TeachersCollection = BaseCollection.extend({
url: "/xyz/abc",
initialize:function(){
console.log(this.url);//xyz/abc
//full url should be 'http://path/to/api/xyz/abc'
}
});
var x = new TeachersCollection;
The easiest solution would be to use a function for url, then you could do things like this:
TeachersCollection = BaseCollection.extend({
url: function() {
return this.path + '/xyz/abc';
},
//...
The problem with trying to use just a string for url in such cases is getting the right this so that you can look up the path. You could go through BaseCollection.prototype:
TeachersCollection = BaseCollection.extend({
url: BaseCollection.prototype.path + '/xyz/abc',
//...
but that's pretty cumbersome and noisy, I don't think saving the overhead of a function call is worth the hassle.
Maybe you can write this code:
console.log(this.path+this.url)
Edited This Below
In this image below I have two main regions.
One for the user list on the left: allusersRegion
And another for the the right side where a layout is displayed, which contains unique attributes to the user that was clicked in the allusersRegion and a list of articles by the user: middleCoreRegion
**If you noticed the middleCoreRegion is showing all articles by all users..This is wrong and I am trying to show all articles of the individual user (in this case. "kev")
I tried to see if my problem was with my JSON api (served via node/rest/mongoose) or with my underscore templates, but if it displays both list then I suppose I need to filter from inside backbone.
At first I tried using a Marionette.vent to simply change the url, but somhow I can't get the _id name into the url: function(), it says undefined...
var someuser = this.model.get("_id");
myApp.vent.trigger("showarticles", someuser);
I add a listener in the backbone collection on the same page:
myApp.vent.on("showarticles", someuser);
**The Edit (A Different Way of Doing this) Here is my code
var usertab = Poplive.module('usertab', {
startWithParent: true,
});
usertab.addInitializer(function() {
User = Backbone.Model.extend({});
UniqueArticle = Backbone.Model.extend({});
//Collections
Users = Backbone.Collection.extend({
model: User,
url: '/api/user2'
});
UniqueArticles = Backbone.Collection.extend({
model: UniqueArticle,
url: '/api/survey'
});
//Layout
var VisitingLayoutView = Backbone.Marionette.Layout.extend({
template: "#visiting-layout",
regions: {
firstRegion: "#listone",
secondRegion: "#listtwo",
thirdRegion: "#listthree",
playRegion: "#playhere",
articlesRegion: "#articleshere"
}
});
AllUserView = Backbone.Marionette.ItemView.extend({
template: "#tab-alluser-template",
tagName: 'li',
events: {
"click #openprofile" : "OpenProfile"
},
OpenProfile: function(){
console.log("Profile is open for " + this.model.get("username"));
var modelo = this.model.get("_id");
var vlv = new VisitingLayoutView({model: this.model});
Poplive.middleCoreRegion.show(vlv);
var ua = new UniqueArticles();
var uacoll = new UniqueArticlesView({collection: ua});
vlv.articlesRegion.show(uacoll);
}
})
//ItemViews
UniqueArticleView = Backbone.Marionette.ItemView.extend({
template: "#unique-article-template"
});
//CollectionViews
AllUsersView = Backbone.Marionette.CompositeView.extend({
template: "#tab-allusers-template",
itemView: AllUserView
});
UniqueArticlesView = Backbone.Marionette.CollectionView.extend({
template: "#unique-articles-template",
itemView: UniqueArticleView
});
//Render Views
var alluserview = new AllUserView();
var allusersview = new AllUsersView();
//Fetch Collections
var theusers = new Users();
theusers.fetch();
var userscoll = new AllUsersView({collection: theusers});
Poplive.allusersRegion.show(userscoll);
});
Assuming UniqueArticle to be the Backbone Model, for the Model with a specific id to be fetched you would need to define the urlRoot property which will append the id of the model to the request.
So the id attribute will be appended to the end of the request the model from the server when you do a fetch on it
var UniqueArticle = Backbone.Model.extend({
idAttribute : 'someuser',
urlRoot : function(someuser){
return '/api/visitingarticles/'
}
// this would send a request for
// /api/visitingarticles/someId
});
var UniqueArticles = Backbone.Collection.extend({
model: Article,
url : function(someuser){
return '/api/visitingarticles/'
}
// /api/visitingarticles -- All Articles will be fetched
});
I think what you want, is to define url as a function, and have a user attribute on your collection:
var UniqueArticles = Backbone.Collection.extend({
model: Article,
initialize: function(){
var self = this;
myApp.vent.on("showarticles", function(someuser){
self.user = someuser;
self.fetch();
}
},
url : function(){
var fragment = '/api/visitingarticles/';
if(this.user && this.user.id){
return fragment + this.user.id;
}
return fragment;
}
});
(Disclaimer: untested code, but it works in my head :D)
Then each time you trigger the event, the userattribute is updated, the collection is reset with the updated url.
As a side note, you might want to look into using a filtered collection. I've implemented that idea in my book, based on Derick Bailey's code here: http://jsfiddle.net/derickbailey/7tvzF/
Here is my version: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/common.js
And an example of its use (lines 38-41): https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L38
I am very new to backbone.js, to try it out I made a function to append an element using my array. But I don't know how to fetch the same from server or my local path.
I tried with some tutorial but still I couldn't get any good result. Can any one correct my function to fetch the data from local folder or server?
code :
this is my local path: '..data/data.json'
(function($){
var student = [
{name:'student1'},
{name:'student2'},
{name:'student3'}
]
var model = Backbone.Model.extend({
defaults:{
name:'default name'
}
});
var collection = Backbone.Collection.extend({
model:model
});
var itemViews = Backbone.View.extend({
tagname:'li',
render:function(){
this.$el.html(this.model.get('name'));
return this;
}
})
var view = Backbone.View.extend({
el: $("#contacts"),
initialize:function(){
this.collection = new collection(student);
this.render();
},
render:function(){
var that = this;
_.each(this.collection.models, function(item){
that.renderName(item);
})
},
renderName:function(item){
var itemView = new itemViews({model:item});
this.$el.append(itemView.render().el);
}
});
Collections have the url property which links to the url where the models can be fetched (in a proper JSON format of course).
If you have a RESTful API you can tie them directly to a collection on your backend.
In your case you can modify the collection definition as follows
var collection = Backbone.Collection.extend({
model:model,
url: '..data/data.json' //OR WHATEVER THE URL IS
});
Then when instantiating your collection you have to call the fetch() method to fill in the collection.
myCollection = new collection();
myCollection.fetch();
For more information see this post
Backbone will call GET, POST, DELETE, etc on that same url depending on what needs to be sent or received from the server. So if you are building the REST api, your controller or router should route the appropriate functions to those methods. See below for exact mapping:
create → POST /collection
read → GET /collection[/id]
update → PUT /collection/id
delete → DELETE /collection/id
As a side note, if you have no control over the JOSN that is returned from the server, you can format it in any format you like in the parse function.
parse: function(response) { return response.itemYouWantAdded; }
This would be the case if your server is returning an object within an object, such as twitter feeds.
Or you could simply populate the model from the response manually in the parse function
parse: function(response) { var tmpModel = {
item1:response.item1,
item2:response.item2
};
return tmpModel; }
Hope this helps.
You can set a URL for your model or for your collection. Then when you run fetch it will read your JSON straight into either a single model or a collection of models. So in your case, your collection might look like
var collection = Backbone.Collection.extend({
url: '..data/data.json',
model: model
});
collection.fetch(); // Could also use collection.reset()
You just need to make sure your JSON is formatted properly to match your model's attributes.
let's say I have :
var Book = Backbone.Model.extend();
var Collection = Backbone.Collection.extend({
model: Book,
url: '/books',
initialize: function(){
this.fetch();
})
})
How can I change the Collection's url when instantiating a new collection ?
var AdventureBooks = new Books({ url: '/books/adventure' }) does not work
var AdventureBooks = new Books({ category: 'adventure' })
and in the Collection definition:
url : '/books/' + this.category does not work either.
Thanks.
The following should work:
var AdventureBooks = new Books();
AdventureBooks.url = '/books/adventure';
var Book = Backbone.Model.extend({
"url": function() {
return '/books/' + this.get("category");
}
});
For some reason the parameters passed to Collection constructor (for example "url") are not set to the object. The collection uses only few of those (model and comparator).
If you want to pass the url via constructor you need to create initialize method that copies the necessary parameters to the object:
var Book = Backbone.Model.extend({
initialize: function(props) {
this.url = props.url;
}
}
var book = new Book({url: "/books/all"});
Like Daniel Patz pointed out , the problem lies in how you're instantiating the collection. I just struggled with this for a bit right now, so I thought I'd update this, even though the question is somewhat old.
The first argument is expected to be an array of models, with the options coming after. This should work:
var AdventureBooks = new Books([], { url: '/books/adventure' })
If you want a dynamic URL, then Raynos' answer might be the way to go.
If you want to have dynamic urls for your collection, try this (tested with backbone 1.1.2):
Create an instance of your backbone collection and pass the dynamic url parameter as an option (the options object needs to be the the second argument as the first one is an optional array of models):
var tweetsCollection = new TweetsCollection(null, { userId: 'u123' });
Then inside of your collection, create a dynamic url function that uses the value from the options object:
var TweetsCollection = Backbone.Collection.extend({
url: function() {
return '/api/tweets/' + this.options.userId;
},
model: TweetModel
});
The best solution for me is the initialize method, look at this example:
Entities.MyCollection = Backbone.Collection.extend({
model: Entities.MyModel,
initialize: function(models,options) {
this.url = (options||{}).url || "defaultURL";
},
}
use it as follows:
var items = new Entities.MyCollection(); //default URL
var items = new Entities.MyCollection([],{url:'newURL'}); //changed URL
I know that this a late reply, but I had a similar although slightly more complicated situation, and the selected answer didn't really help me.
I have a Conditions collection, and each Experiment model has multiple conditions, and I needed my url to be /api/experiments/:experimentId/conditions, but I didn't know how to access the experimentId from the empty Conditions collection.
In my Conditions collection url function, I did a console.log(this.toJSON()) and discovered
that Backbone inserts a single dummy model in the empty collection with whatever attributes you passed in at it's creation time.
so:
var Conditions = new ConditionsCollection({
experimentId: 1
});
I somehow doubt that this would be considered a best practice, hopefully someone else will respond with a better solution, but here's how I defined my Collection:
var ConditionsCollection = Backbone.Collection.extend({
model: Condition,
url: function(){
var experimentId = this.at(0).get("experimentId");
return "/api/experiments/" + experimentId + "/conditions";
}
});
This work for me (tested with backbone 1.2.1):
var serverData = Backbone.Collection.extend({
url: function() {
return '//localhost/rest/' + this.dbname;
},
constructor: function(a) {
if(a.dbname){
this.dbname = a.dbname;
}
Backbone.Collection.apply(this, arguments);
}
});
use it as follows:
var users = new serverData({dbname : 'users'});