I currently have two Backbone models: user and project. I would like to have a Backbone view containing a form that enables the creation of a new project, and the association of currently existing users (entries from the database users table) with this project. When a user completes this form and clicks the save button, the new project should be saved into the database (in the projects table) and the relationship between the saved project and the related users should be saved into a relationship table (projects_users table, containing the corresponding project id and the user id for each relationship). Currently, I can save the project information, but could not get any data into the projects_users table using Backbone-relational.
What do you think the best approach to achieve the above functionality is? It would be great if you could point me to specific code that I could use as a template.
Thank you,
Alexandra
After some frustrating trial-and-error period, I finally managed to get my code working! It's not beautiful, but it is functional, and now I can start thinking about improving it. Hopefully, some other people will find this information useful ...
The one thing that put me on the right track was the understanding that what needed to be changed was not only in the backbone view code (the one with the new projects form), but also in the corresponding rails models.
For the rails part (Rails 3.2.2), I made sure that the following model files had the necessary information:
project.rb
class Project < ActiveRecord::Base
has_and_belongs_to_many :users
#attr_accessible :name, :description, :users_attributes
#has_many :projects_users, foreign_key: "project_id", dependent: :destroy
#has_many :users, through :projects_users
#accepts_nested_attributes_for :users
end
user.rb
class User < ActiveRecord::Base
has_and_belongs_to_many :projects
end
projects_users.rb
class ProjectsUsers < ActiveRecord::Base
belongs_to :project
belongs_to :user
end
I have read in many different places that has_and_belongs_to_many is not the best way to set many-to-many relationships in rails. Nevertheless, I could not get the same functionality using the has_many definition - the commented part in project.rb is the way I tried this different approach. The file user.rb had some corresponding code, which I removed for simplicity.
Now, what I needed to get done in the backbone form view was to send a POST request with a JSON object that the rails projects_controller.rb could recognize. Initially, I tried several POST requests without success (and no errors to guide me). But then, I remembered to have previously implemented a form for teams where users could be added to a particular team (HABTM Checkboxes - there is a railscast for this functionality). After looking at this example, I realized what was needed from my POST request. This is what I wanted to see in the rails server log file:
Started POST "/projects" for 127.0.0.1 at 2012-06-27 00:35:22 +0000
Processing by ProjectsController#create as JSON
Parameters: {"project"=>{"description"=>"with some description", "user_ids"=>["101", "1", "99"], "name"=>"some new project"}}
Backbone relevant files to achieve the above request:
project.js
App.Models.Project = Backbone.Model.extend({
urlRoot: '/projects',
// Default attributes for the project.
defaults: {
description: "",
user_ids: []
},
/* getters */
});
user.js
App.Models.User = Backbone.Model.extend({
/* getters */
});
form.js
App.Views.Projects.Common.Form = Backbone.View.extend({
...
events: {
"submit #new_project_form" : "formSubmit"
},
formSubmit: function(event) {
this.submitted($(event.target));
return false;
},
submitted: function(formElement) {
var newData = this.serializeFormData(formElement);
this.model = new App.Models.Project({
name : newData.name,
description : newData.description
});
this.saveFormData(newData);
return false;
},
serializeFormData: function(formElement) {
var fields = formElement.serializeArray();
var serializedData = {};
$.each(fields, function(index, field) {
serializedData[field.name] = field.value;
});
return serializedData;
},
// THE IMPORTANT PART FOR THE POST REQUEST
saveFormData: function(newData) {
// preserve reference to view for callbacks
var self = this;
var project = this.model;
project.set({
// a list of user ids associated with a project
"user_ids" : this.view_variables.user_ids
});
var project_object = ({
"project" : _.clone(project.attributes)
});
$.ajax({
type: 'POST',
url: '/projects',
data: project_object,
dataType: "json",
success: function() {
self.$el.hide();
self.addNewModelToCollection();
}
});
},
...
});
The code is kind of verbose, and includes some code that is specific to my project. Still, the relevant part is in the saveFormData function, where the jQuery ajax function is used.
In case you have any suggestions, either for the rails or for the Backbone part, please let me know. I will be happy to learn how to improve this solution.
I know it's old post but this looks interesting: http://backbonerelational.org/
Related
var items=[{"endsAt": "2013-05-26T07:00:00Z","id": 1,"name": "Niuniu1"},
{"endsAt": "2013-05-26T07:00:00Z","id": 2,"name": "Niuniu2"}]
ItemModel=Backbone.Model.extend({});
ItemCollection=Backbone.Collection.extend({
model:ItemModel,
url: '...',
parse: function(response) {
return response.items;
}
})
If I have a series of data like items, when I build model, for each model, it's endAt will be "2013-05-26T07:00:00Z". Where can I modify the model or data process so it will actually be "2013-05-26"?
I could do a foreach loop inside collection to process the date, but I'm wondering if there is a better pracitce like to do a parse inside the model?
Thanks!
The practice I use is the one you said you've thought about - implementing a custom parse on the model. As the documentation states, it will be called for you after a sync. See here: http://backbonejs.org/#Model-parse
ItemModel = Backbone.Model.extend({
parse: function(response,options) {
//perform your work on 'response',
// return the attributes this model should have.
};
})
As far as I know, you have 2 options here
Implement a custom parse method inside your model
Implement the initialize method inside your model
Both of them don't have any problems, I did 2 ways in several projects, and they work well
I am new to Backbone-relational, I am not sure what is the right way to use HasMany.
I have a Parent model which have many children (by "many" I mean thousands of children). In order to avoid performance issue, I query children by their foreign key: /child/?parent=1, instead of create a huge list of child_ids in Parent. But seems this is not the way Backbone-relational work.
So I am wondering what is the right way to handle this.
1, Change my json api to include list of child id in parent, then send thousands of ids as Backbone-relational recommend:
url = function(models) {
return '/child/' + ( models ? 'set/' + _.pluck( models, 'id' ).join(';') + '/' : '');
}
// this will end up with a really long url: /child/set/1;2;3;4;...;9998;9999
2, override many method in Backbone-relational, let it handle this situation. My first thought is :
relations: [{
collectionOptions: function(model){
// I am not sure if I should use `this` to access my relation object
var relation = this;
return {
model: relation.relatedModel,
url: function(){
return relation.relatedModel.urlRoot + '?' + relation.collectionKey + '=' + model.id;
}
}
}
}]
// This seems work, but it can not be inherent by other model
// And in this case parent will have am empty children list at beginning.
// So parent.fetchRelated() won't fetch anything, I need call this url my self.
3, Only use Backbone-relational as a Store, then use Collection to manage relations.
4, Some other magic way or pattern or backbone framework
Thanks for help.
Here's the solution that I have going on my current project. Note that Project hasMany comments, events, files, and videos. Those relations and their reverse relations are defined on those models:
Entities.Project = Backbone.RelationalModel.extend({
updateRelation: function(relation) {
var id = this.get('id'),
collection = this.get(relation);
return collection.fetch({ data: $.param({ project_id: id }) });
}
});
I have the REST endpoint configured to take parameters that act as successive "WHERE" clauses. So project.updateRelation('comments') will send a request to /comments?project_id=4 I have some further logic on the server-side to filter out stuff the user has no right to see. (Laravel back-end, btw)
I asked this question elsewhere. But I would ask it here too in case who knows the answer.
I recently wrote a simple web app. It has two views in total, and users should be able to go back and forward between the two views. It seems nature to me that setView method can the job of changing the app view. It works all good when switching from Index view to Show view by clicking a link. However, it cannot go back to Index view when I click a link. It just pops up this error message "Please set View#manage property with selector '' to true". Since the old view objects should have been destroy when switching to another view, why it would have this error unless it's not working as I thought it would be.
Below is a snippet of my coffeescript code.
MyApp.Routers.Home = Backbone.Router.extend(
routes:
'books' : 'showBooksIndex'
'books/:id' : 'showBook'
initialize: (options) ->
#buildLayout()
buildLayout: ->
#layout = app.useLayout("main")
showBooksIndex: ->
#cleanLayout()
#books = new MyApp.Collections.Book();
#viewIndex = new MyApp.Views.BooksIndex(
collection: #books;
)
#layout.setView('#app', #viewIndex)
showBook: (id) ->
#cleanLayout()
#book = new MyApp.Models.Book id: id
#view = new MyApp.Views.BookShow model: #book
#layout.setView('#app', #view)
cleanLayout: ->
appView = #layout.getView('#app')
if appView
appView.remove()
MyApp.Views.BookShow = Backbone.View.extend(
id: "book-show"
className: "book-card"
manage: true
template: JST['templates/books/show']
initialize: ->
#model = #options.model
_this = #
#model.fetch(
success: (model, resp)->
_this.render();
)
MyApp.Views.BooksIndex is has similar code to BookShow view.
Caching the views is probably a solution too. This approach will work around this issue because recreation of view objects is avoided. But since my app have lots of photos, I would prefer to fetch data from server every time the app view changes. I am not sure if it is the right way to go. Thanks in advance for sharing your insights.
I have this code in my Backbone application:
app.Collections.quotes = new app.Collections.Quotes();
app.Collections.quotes.fetch();
And I can see an array of Objects returned in the network tab but when I expand out the Collection, the Models array inside is 0. Do they get instantiated as Models when fetch() is ran on a new Collection?
This is my Collection:
app.Collections.Quotes = Backbone.Collection.extend({
model: app.Models.Quote,
url: function() {
return app.Settings.apiUrl() + '/quotes';
}
});
EDIT:
app.Collections.quotes.fetch({
success: function(){
app.Utils.ViewManager.swap('section', new app.Views.section({section: 'quotes'}));
}
});
And in my Model:
idAttribute: 'Number',
This was the fix! Thanks for help. Dan kinda pointed me in the right direction amongst the comments...
Calling fetch() on a Collection attempts to populate the JSON response into Models: Collection#fetch.
Is your server definitely returning a valid JSON array of objects?
Do you have any validation on your Quote Model? I'm pretty sure Backbone validates each models before populating the collection, only populating with the models which pass. So if it exists, check that your Model#validate method is working correctly.
You shouldn't need an ID (although it's obviously required if you want to edit them).
I'm making a Grocery list app, which is very similar with the todo list. I have several years of Rails dev experience, but am having trouble figuring out from all the examples what to put into a collection, and what to make a model.
I mocked up the app with Sinatra and Redis as the backend. My goal is to make Sinatra just the simple API and have backbone manage all the view.
Right now, a Grocery list is just a complex ID, which has a Set of string items. So something like:
/lists/asdfasdf34asdf => ["eggs", "bacon", "milk"]
Moving to backbone, would I make the model an "Item" and then the collection would be the "List", or would it be something else?
I guess my routes aren't classic Rest so maybe that's why i'm having trouble sorting out what to do where.
If there's only one grocery list, a Collection of item Models is probably appropriate. Backbone isn't too prescriptive about how things are organized, but you will definitely want to set the url property of each model/collection in a logical fashion. You might do something like this:
var app = {
item: Backbone.Model.extend({
// define an item model to go in the itemCollection
}),
itemCollection: Backbone.Collection.extend({
initialize: function (key) {
this.key = key;
},
model: app.item,
url: function () {
return 'lists/' + this.key + '/items/'
}
})
}
and then instantiate each version of the application along these lines:
var userListKey = 'foobar',
userCollection = new app.itemCollection(foobar);
// proceed with app. Requests for userCollection will now be
// directed to /lists/foobar/items
There are many other ways to do this, but hopefully this is a start.