I am developing a Backbonejs app using the excellent Marionette plugin.
I have a big navigation view consisting of <a> tags referencing various collections. An example will better explain this:
Cars
Car A
...
Car Z
Books
Book A
...
Book Z
Each block is a collection of models. Eg. CarList, BookList
How do i best architect the Menuview so that, whenever any of the model changes in any of the collection the Menu view is rerendered?
Maybe you could try to use a Composite View for your menu view and a Collection View for every sub-folder of your menu. Composite and Collection Views are made in a way that they will add/remove automatically a child element when a model is added/remove to the collection.
For more information you can check here: http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/
Related
I've been learning backbone.js over the past couple of weeks and am about to start using it in anger in an app I'm writing. My question to you is about a use case for models and collections in a Bootstrap 3 navbar.
On my server side I authenticate the user and, based on their profile, assign them a role (author, editor, administrator etc.). I then construct an object that contains the appropriate menu structure for the user's role and pass that to the client using Handlebars. The intent is for the browser to construct the HTML to render the menus according to the properties (key/values) in the object using backbone.
My thoughts are that the navbar itself is a collection of models (navbar); each dropdown menu or link on the navbar is a single model (navbarItem); each of these contains a collection of menu items (navbarItemMembers), these collections being of models of each individual menu item (navbarItemMember). I can then set event listeners against each navbarItemMember to trigger an appropriate route or render action as appropriate.
So, getting to the point... am I over-complicating things? A collection containing models each containing a collection of other models, each of those mapping to a view that renders a on the main page. Seems convoluted to me, but from my (albeit limited) understanding of backbone.js it does seem the right way to do this...?
Advice much appreciated from those more experienced (battle scarred?!) than I. Thank you.
Use a collection when it's going to provide some benefit to you over a plain model. The benefits could be either
Interacting with a RESTful service where you'll want to not just get a list of data but then separately fetch/modify/add/delete individual items is that list
Defining separate Views for each item in the list rather than a having a single View that iterates over the list.
I don't think a basic navbar benefits from either of those. If your navbar has some super fancy elements beyond just links then maybe #2 applies but otherwise keep it simple, use a single model with a single view/template
I'm a little new to the AngularJS world, and I'm wondering what the best way is to show a resource detail view within a list view.
Given a path like /people, I would just show a list of people resources. If I were to navigate from one of those people to a url like people/john-doe, I can easily get a detail view and all the data associated with that person. But how can I do this without leaving the list view? I'd like to somehow append the detail to the list, or show it within the list, etc.
What you're describing is nested views, which isn't something that the regular ngRoute library does well. I advise you check out angular-ui router.
I have 2 parts in my application:
A grid of players each with a thumbnail to click which activates a detail view on the left side of the page.
Detail view - activated when player is clicked on grid.
The model is very straightforward and will be read only. (Player model and Players collection)
The way I am thinking of organizing views is as follows:
AppView - main view that fetches collection (to create grid) and populates the grid. (JSONP is done in model) and manages events for the grid such as pagination.
PlayerThumb View - The view that contains a thumbnail of player that can be clicked from inside the grid.
CardView - This view contains the players large picture as well as stats about the player.
My confusion is how do I communicate information to the card view when a player thumb view is clicked?
What is the responsibility of the AppView? Is it doing too much? Should I create a PlayerGridView? If this is the case, what would app view be used for?
On adding new model to my collection I don't want the view to be refreshed but I want the model to be appended to my collection and be appended to the view. SO i shouldn't render the view again. Is it possible via Backbone.js? How should I proceed ?
You could have a view that handles the whole layout, and a view that represents a single model. You would make the render method of the latter to return the HTML of a single model, and append the result to a list using the main view. You have a great example of this in the Addy Osmani's book "Developing Backbone.js applications". Take a look at the section where he explains how he renders each task to the todo list of his Todo App, if I understood well, your problem is solved in there.
I'm pretty new to Backbone and Marionette and am having a tough time getting my views to communicate.
I've got a composite view that displays a list of items. To add a new item to the list, I have a popup modal that opens in a new item view that is separate from the composite view.
I'm not sure that this is the best way to do this, but in the modal, I created a new instance of the collection with all of the items and added the new item to that collection. This new item shows up in the original composite view, but only after I refresh the page.
I can't seem to figure out how to get the composite view to listen for the add event and render the new model after it is added.
Am I on the right track here? If not, what should I be doing to add to a collection from a modal?
I think I got this figured out. Instead of creating a new collection in the modal view, I passed in the collection from the composite view as a parameter when I created the modal view. Now, when I add a new model in the modal, the 'add' event is automatically triggered on both versions of the collection and the view automatically renders the new model. No need to bind any extra events like I was thinking.
Your solution will work, but means your views are pretty tightly coupled. You might want to look into using events instead (see How do I send a model that was clicked on within a ItemView to another ItemView that is on the same page?)
How your functionality would work with events:
Within the modal, you enter the data for the model to create
When you press the "save" button,
you validate and save the model var myNewModel = ...
you trigger an event: MyApp.MySubApp.trigger("item:add", myNewModel)
In the controllerfor the list view, you listen to that event, and add the new model to the collection.
The handler code in your controller would look something like:
MyApp.MySubApp.on("item:add", function(model){
this.myCollection.add(model);
});
If you'd like to learn more about using events, check out 2 Marionette tutorials I wrote:
http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/
http://davidsulc.com/blog/2012/05/06/tutorial-a-full-backbone-marionette-application-part-1/
Both use events to communicate information within the apps.
In addition, basic events are also explained here: http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf