Managing multiple views


#1

Hi folks,

I’m new to Ember and currently playing around with it a lot. I’m currently trying to do the following:

An application which consists of multiple parts: header menu, a subhead and the content. My first question concerns the subhead, since it is pretty complex. It consists of three widgets and has two different views (a small one and an expanded one). Just imagine it as follows:

Last users | Last articles | Upcoming events
John Doe   | How to ...    | 27.03.2015 eventname
....

You can either expand the subhead, so that (all!) the widgets show more information or just view the “smaller” version. The smaller version doesn’t just hide data but also changes the way of information is displayed (e.g. the upcoming events are going to be in a slider, etc.)

The question now is, what do I need to implement this subhead? Three different widgets, with different data and the opportunity to change to see more / less information.

Thanks!


#2

Am I correct in thinking your data is like this?

+ root
..- node
....- node
..- node

I haven’t done this (yet), but I think it can be done with two templates.

Primary template:

<h1>List of Things</h1>

{{#each item in model}}
  {{render "thingTemplate" item}}
{{/each}}

“Thing” template: (model is item)

<h2>Subhead: {{model.name}}<h2>
{{#if model.child}}
  {{render "thingTemplate" model.child}}
{{/if}}

I think that may do it? At least, it works in my head… in theory.

But, it could be dangerous to go alone, take this: http://emberjs.com/guides/templates/rendering-with-helpers/


#3

First, thanks for your answer!

But please do not think of my widgets in a connected way; there’s no primary template, since every widget is completely different (in data, events, layout, etc.). Let me try to build appropriate questions related to my problem:

  1. Should there be a view for every widget? The confusing thing here is the first sentence in this article: http://emberjs.com/guides/views/customizing-a-views-element/ - my widgets are far from being just “a single dom element”, they’re complex structures with lots of events, etc.

  2. How to pass data to these views? Afaik models are related to routes - not to views?

I think that should be enough for now. :slight_smile:


#4

You’re probably going to want to investigate component architecture in Ember. I think that may be what you’re looking for, but I’m sorry that I don’t have anything else to add there.

You’re right on #2; models are not related to views. Models should be returned in the route’s model method, which are then set on a controller’s model property automatically, or manually in the setupController method.


#5

You’re right on #2; models are not related to views. Models should be returned in the route’s model method, which are then set on a controller’s model property automatically, or manually in the setupController method.

Okay, but then again; how to pass data to multiple views? :>