I've been grappling with this relatively simple problem in Ember JS in a variety of my apps. I know this may seem like its been answered seven ways to Sunday but I haven't found a solution that I can actually map to my problem.
Okay, so I need a class master/detail view with a route structure like:
Admin Dashboard
Dashboard
Students page (displays a master list of students in a sidebar)
Student page (upon selecting a sidebar item, it is selected and "details appears"
This pattern is reused exactly at three different dashboards in my site. The only difference is the record array of students is different for each one. I'm asking what is the most Ember-esque way to accomplish this?
I have tried multiple solutions but each one has its own problems. Using the {render} helper to render some universal "students" template breaks because I am leveraging the router and <li> tags inside to automatically apply the active class to the selected student, and students.student isn't a route in my router. If I add that route, then it routes away from the dashboard parent route (with the navbar, etc).
I basically want to package this view into a component almost and pass it the array to display, but then how do I add the "active" class? Surely there is an easier way then manually adding and removing the class.
Thoughts?
I apologize if my question isn't super clear! Its a subtle distinction.
Related
I am creating a Sitecore MVC site for a client and I need to create page that will list news articles for the company.
So far, I have created items that use a shared data template called “Article,” and I also have a sublayout (a view rendering) called “Article” that will display these items.
For the list itself, my plan was to create another component (a sublayout) call “News_List”, and to put a placeholder in it called “List”.
My question is this: can I allow the author to insert articles (e.g., N items of type “Article”) into this placeholder via the page editor?
Will SC allow you to insert multiple instances of the same component into a placeholder? Will this break anything?
I believe this is a pretty common question but I have not found a definitive answer. Thanks in advance…!
You can insert as many components (of the same type) in your placeholder as you want.. Just make sure to put the placeholder settings correctly and give it a decent name (not just "list" ;))
But are you sure you want to do this? Your editors will manually need to create a list of components for each article they want to add on the page. Doesn't sound to be very user (editor) friendly.. Maybe you should consider creating a list component that can get a list of articles as a datasource and show those. Or even select them automatically (but that might be not according to your business case)..
Yes, authors can add multiple instances of the same component into a single placeholder.
Assuming that the code of the component doesn't do any stupid things it's absolutely ok to do this.
I have two models in my route, people and appointments.
My components are:
people-list(parent) and people items(children),
appointment-list(parent) and appointment items(children).
In my route, I want to list appointments based on checked people (checkboxes in each people item). How would I tell my route about all the checked people items?
Also, I have a datepicker on the route, I want to display appointments based on date, how would I go about doing this?
Again, I want to use pure COMPONENTS, no controllers and I also do not want to make a property in my people model called isChecked as this would never be a real attribute in a real database table.
Help is greatly appreciated. Thanks.
I think it's counter-productive to avoid controllers completely, as what you describe is one of the things that controllers are about, holding on to state.
The route is responsible for dealing with the URL segments of the application and setting up the template/controller/model combo, but it doesn't know anything about them, so it'd be a bad place to keep that data in.
An alternative is to use a service, which is possibly trickier than relying on the controller.
What you should avoid is the proxying behaviour of the old ObjectController and ArrayController (gone in 2.0), and don't rely on the controller being a singleton (routable components won't be singletons).
On one Ember route, I have one side a list of records (foos) on the left, and on the other side a form. Usually, I'd route it like so: /foos/bar/1/edit. However, I also have a list of baz records, that can be displayed on the left, next to the form.
Ideally, I'd like to be able to have the user be able to alternate between the two lists on the left, while preserving the form on the right.
My first attempt to do this was to load both lists in the same route, and toggle them with a tab jQuery plugin. However, this poses several problems related to pagination and back button/refreshing.
I've also tried putting the lists in their own routes (i.e. /foos/bars/1/edit and /bazs/bars/1/edit). But I can't figure out how to link to a different list without losing the edit page.
Is there a better way to accomplish this?
I think the best way would be using the separate routes but instead of /foos/bars/1/edit and /bazs/bars/1/edit having the form in the main parent resource then foos and bazs as the sub resources. That way when you transition the routes for which list you want displayed it will changed the template that gets rendered in the outlet but maintaining the form.
Scenario:
You have something like a wizard. The user completes something on the first page, click next and go to second page and so on until he reaches the last page. Here he clicks finish and all his input is stored and persisted using an ember model.
There are two other questions similar to this one:
Ember.js wizard control
Multi-step form (or multiple "pages") in one route using Ember.js
At first I've tried with a route/controller/view for each step, but since the answers are basically a controller's state variables and get lost while transitioning, it is obvious that it cannot work like this!
Then I took the approach described in the above links. One route, one controller, one template with lots of {{#if }} so that I show only the fields of the current step. I think I might improve this by using partials and so each step will have its own template.
The question is: is this the only/the best approach? Does anyone figured out a better way to implement such a flow?
If you make each wizard page a component and then pass the model as a template parameter to each component, you get a pretty nice workflow. The URL is stable (not constantly adding junk onto the end in order to pass state around); it's easy to drop the user into the first step whenever they enter the route (such as manually inputing the URL or perhaps more importantly, finishing the wizard and then hitting the browser's back button); and you can perform validation on each page of the wizard.
Check out my longer answer here
One of the possible approaches would be using Query Parameters so that you can manage a state of each step in a single wizard controller.
I'm having a problem figuring out what is the idiomatic Ember.js way of representing the following task: the application should display a list of master entries (let's call them classes) each one having one or more child entries (let's call them students), the latter having in turn teacher-marks, as sub-child entries.
I want the page to display the list of classes along with the list of students for each one as the standard view, while the teacher-marks should be initially hidden, but made visible on demand, when they should be editable in place (new and remove operations).
The way I've implemented this display-wise is this:
Each class is displayed as an Ember view, as I need a lot of interaction with the controller. The teacher-marks are implemented as Ember components, as well as the students. Neither the view, nor the components perform any communication with the server, they basically just send actions to the controller / route.
Displaying and hiding the teacher-marks are done via properties in the components.
I only have one route for all this (and as far as Ember.js tutorials and examples go, I feel I may be doing it wrong) and one controller. The route is named 'classes' and has an ArrayController displaying the array of classes. I have item controllers for each class.
The route object is the one that fetches data from the server. The manipulated child elements (e.g. new/removed teacher-marks) are pushed to the server via dedicated model functions (using Ajax calls) called from the main route events. I am not using Ember data.
As far as I read, I should be having nested resources for this implementation, but am otherwise at a loss as to how to implement it that way and keep displaying the classes and students at all times.
I would greatly appreciate all amendments and suggestions to the way I currently implemented this. It would also help me a great deal if you could add why will something work better one way or the other.
I haven't included any code as I feel it would be better expressed this way as a problem. My code is obviously more complicated than above, and not involving the class - students case. If needed, I can sketch-up a model.