Need conceptual clarification on routes, controllers, and views

Design
1

Excuse a noob for asking something that is probably obvious to many but i’m having a hard time distinguishing the differences between these in practice. I understand in theory this is how it works.

Given a directory structure like this (i’m using PODs by the way)

pods/Portal
|- route.js
|- controller.js
|- template.hbs 
|- view.js
  • Route.js handles generating the model, route authorization, and redirection
  • controller.js handles actions that manipulate the model and manipulate template specific properties (ie. commentsVisible)
  • Template.hbs contains my view code
  • View.js (i’m not too sure how it fits in here)

But in reality i have seen the following

  • Route.js can handle actions from template.hbs but can’t set template properties not contained in the model
  • Controller.js can manipulate the DOM in actions but can’t perform setup work upon the DOM.
  • View allows manipulation of the DOM upon setup and also allows actions

So where does this distinction actually exist? It looks like views and controllers are doing the same job and routes and controllers share a good portion of the job. Where is the line i need to draw?

I’ve heard a lot of people talk about moving everything to components instead but it seems kinda awkward to wrap template specific logic inside a global level component just because it wraps up nicely.

2

I have read that you can nest your components. Something like pods/components/portal/awesome-portal-component/component.js

then in a template you can include it as

{{portal/awesome-portal-component }}

that way you can organize your components to match your route structure where appropriate.

As to where to draw the line the layer that owns the model should be the one to mutate that model. Everyone down from that layer should be watching for changes and sending actions.

The controller is going to turn into a routable component, view has basically already been replaced by component. So you should be thinking about templates, components and routes. You can even start treating your controllers more like components by following this https://gist.github.com/samselikoff/1d7300ce59d216fdaf97

3

Ok, i think i am starting to understand.

  • Routers are taking on the action handling of controllers, and the ‘model’ prefix for properties is going away.
  • Components are going to keep handling template specific logic, and DOM manipulations.

So if i need to do DOM manipulations that view.js is doing right now i should just bite the bullet and move it to a component?

4

I think we’re on the same page but just to clarify.

Routers do handle actions, especially relating to persistence to the server, but there are some actions that should never reach the router, mainly view related actions. For instance you may have a mouse over a point on a graph event that gets handled by a component one level up displaying tooltip information in a panel. That doesn’t really need to go back to the router the action chain can end at the component managing the tooltip panel.

Currently you can clobber a components functions by setting them when you declare it in the template {{my-component _privateAttr='nowBroken' }}. To resolve this, external data will be under attrs. I don’t think the ‘model prefix’ as you call it will be going away, I think but am not sure that there will both attrs and model in the router.

As to your final question if you have views move them to components, it will probably make life easier moving forward.