I'm trying to create a nested model with Backbone and have a couple of issues:
I'll follow with the example in the backbone documentation: say I have a Mailbox Collection, and each Mailbox can have a collection of Messages. I want to see and work on these nested lists in my app. First - I alter my Mailbox model as noted in the backbone documentation.:
var Mailbox = Backbone.Model.extend({
initialize: function() {
this.messages = new Messages;
this.messages.url = '/mailbox/' + this.id + '/messages';
this.messages.bind("reset", this.updateCounts);
},
});
My first question, when I populate data in the model with a server call (which I do with eager loading - I pass in the Mailboxes and nested Messages) I can load the data into attributes on each Mailbox, but when looking at it in a javascript debugger, I see the array of nested data in my object's attributes, but I don't see the data loaded into the actual nested collection. Am I doing something wrong? It's like there's two different sets of information.
Second question - when I show a nested index view - I want to show a list of Mailboxes each with a nested list of Messages - I try to use nested views with backbone, only my nested views repeat the views of other objects from the outer view - creating this strange grouping of duplicate views everywhere. I can't figure out what I'm doing wrong here. Might anyone have any pointers here?
Is there any good definitive guidance on creating not just models, but models, collections and views with nested objects in backbone?
I found out answers to both my questions on the IRC channel for documentcloud..
For the first question, it's simply an exercise in exposing that data. You can either create a global variable (of a collection or router) and expose the data there... That's just up to the user.
For the second question, I had an issue where I was using the rails-backbone gem, and when using the scaffolding for that gem to create nested views, you wind up using jquery to append views in multiple places, because the gem is not expecting to have multiple tbody tags within a document.
Related
I have been told time and time again to "never use .create() on a controller/ObjectController because Ember will do it for [me]". I am confused as to how I then can add an item to an ArrayController without first creating it.
In my case, I am using a Controller (not an ObjectController) as an itemController for an ArrayController since it is not backed by AJAX-loaded data (...is this the correct usage?). I would like to add an instance of my itemController to the ArrayController, but I can't figure out how to do that without first creating the item to be added.
JSBin here:
http://emberjs.jsbin.com/momikuto/17/edit
TL;DR: I don't know how to add a Post object to the ArrayController without the .create() in the addPost function.
Models vs Controllers
I think the primary confusion here is between models and controllers. A controller can decorate a model to add display attributes but isn't the primary data object.
A model can be a simple JSON object, or it could be full-blown ember-data.
So, yes Ember will create your controllers for you. And you specify the model(s) for the controller somehow (see below).
Setting Controller Data
So in your example you are trying to seed your controller with two static posts id:1, id:2. This is probably best done in the Route as opposed to the View.
at first I've to say that I'm not a frontend guy. ;) But in my leisure time I'm working with JS. Currently I'm working on a single page app which uses require.js and Backbone.js. I really like this both libraries!
To my problem:
I've a backbone collection which gets its information from the backend via the fetch() function. This collection only holds data which will not change. The information will be needed to describe a game unit which is defined in the backend. I need the collection for two backbone views, but it's not necessary to fetch the data again. It would be enough to fetch it once, but since I'm using require.js I've to create a new instance of this object. What is the "right" way to solve this problem? Singleton, global object? And I'll have more collections which only holds data which will not change during over the runtime.
If the collection will never change (i.e. the data on the cleitn won't be changed after being received form the server), simply provide the same collection instance to your various views.
I've built the backbone app with one model ("conference"). Now I added second model ("talk"). talks belongs to conference, conference has many talks. The nested json is created and it is easy to render it into single-conference template with .eco like this:
I can basically build nested json and render nested attributes, no problem but is it a good architecture? Later it will have more layers , every talk will have many comments. What I should do?
Should I build new entities "talks" and use Backbone - associations?
What is the right way to deal with models relations.
My code is based on backboneonrails tutorial and it is very structured: https://github.com/lipenco/talkingheads
I want to maintain good architecture while going into related models.
It's not good to store objects in model's attribute. You can have problems with 'change' event not triggered if you change value of properties in attribute that is object.
So I think it's better to create separate model for talk. You can do all association work manually or use library for that: http://backbonerelational.org/
I started reading some Backbone tutorials and I found one thing that astonishes me. Why models are created inside of view? What if I want two different views for one model (what I think MVC is for)? Let's say I need a model Colors, DisplayView view which displays them and ControlsView which allows me to set their configuration. How to handle this?
Backbone does not require that you create your models inside your views - you can (and often should) create your models independently of your views so that they can be shared. Also, just because you create a model inside a view doesn't mean you can't pass a reference to that model to another view and share it that way.
Most likely the tutorials you are reading are very simple and create single models for single views to make the tutorial easier to follow.
I'm currently building an application using Backbone.js with a number of different models that all relate to each other in various ways. I'm currently experimenting with various architectural approaches.
In a nutshell the model relationships looks something like this:
Workspace > Projects > Tasks
There are a few other models, such as lists and categories, that are attached to a project.
On a page with a task list, I'm dumping the JSON of the tasks onto the page and filling up the collection. This works ok, but at the moment all tasks are pulling in their own project data.
task.project.id
task.project.name
The projects are also being pulled in various other locations on the page for various lists. Tasks can also be part of a List which is assigned to a Project. This means I'm also making requests to pull in the lists for a project in various places as well.
The main problem with this is that when updating a model in place I need to find some way to 'sync' them. Which is crazy. They should all be using the same model instance so that each view is using the same model and is updated accordingly without having to do anything.
I've been researching various Backbone.js architectural designs to try and find the answer. Chaplin (https://github.com/moviepilot/chaplin), for example, uses a mediator object to pass data between views. Using this approach, I could have a Projects collection on the mediator and pass this around to the various views via the mediator object.
Each project would include all of it's lists, categories, assigned users etc. Then I could request for a project model like so:
App.Projects.get(12)
Then the task would just need the project ID and a getter and setter method. Views could get access to available projects, project lists, project users easily as well without relying on digging into the model or making further AJAX calls. Additionally, the task models wouldn't require any of the project data on them.
However, dumping all this data in a global object seems bad.
I would possibly end up with something like this:
App.Workspaces
App.Workspaces.get(1)
App.Projects
App.Projects.get(12).get('lists')[0]
App.Projects.get(12).get('users')
To use like this:
var projectId = model.get('project')
var project = App.Projects.get(projectId)
Or with a getter method:
var project = model.getProject()
And add the mediator as a dependency at the model level instead.
Adding a large global object like this adds a fairly large dependency that could make testing difficult. It also seems wrong to assume that the mediator will even have the project available. Maybe it could make the model, fetch it and return it if it doesn't exist.
Any help here would be great! I'd love to know how other people have solved this problem.
I recommend to have a common Collection for all your Task Models. Kind of cache.
Something like: App.Store.Tasks.
Any time you need to feed the Poject.Tasks look first in the App.Store.Tasks and then:
A. If you found the Task there then take it and add it to your Project.Tasks.
B. If not found there then create, fetch and add it to both: App.Store.Tasks and your Project.Tasks.
This way other Project that tries to fetch a Task that already exits will do the same and they both will share the same Model.
Any time you modify one of your Task models in a Project you'll be modifying this Task in every other Project.