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.
Related
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.
I have the following routes, controllers and views:
products
products.index
products.product
products.category
products.new
I view a list of products on products. For all other routes, except for products.index, I want to change the property blurred on the products controller (which blurs the list), so I can view a template on top of it.
Where and how should I do this? Is this something I should put in the view or the controller? I need to be able to determine which route is the child of products.
Update
I need the list on products so it stays in tact, this way the scrollposition is remembered and most importantly, I can 'blur' the product list and show templates on top of it.
The index route was created for this very purpose. I'd recommend just moving that list from products into the products/index template. Then it'll only show up when you're on /products and won't show up any time your on any route/resource deeper.
If you don't want to do that, then you could easily put it in your controller, and follow the pattern shown in this answer: State of nested routes in EmberJS
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 working with a design that has a couple of sections on a single state, and I'd like to be able to link to each section individually.
Is there a way I could render a single template with no outlets at a base level, and then trigger a scroll when transitioning into any of the sub routes?
Additionally, is there a way I could prevent a transition from altering the browsers history, so I could transition around states as the user scrolls without forcing them to hit back several times to escape the page?
The main application template must have an outlet. Else you won't be able to render anything unless you want to do manual rendering with {{render}}. You could put some logic in the template to use with {{render}} but it seems overkill to avoid the convenience of {{outlet}}
You can model your state as a sub state with routes like, post, post/new, post/delete which correspond to routes nested in a post resource.
But, I don't think you can selectively use a route and not affect the url. You can only set the location to none to turn off location changes completely.
I'd just make sure the UI has a contextual back button that takes the user back to the previous state, skipping over states as necessary. So users don't have to rely on the browser's back button too much.
I'm putting together a website, where one of the pages holds an interactive map. The map is implemented as a big table, where each node is a td.
Now this map takes a while to render, and so, I'd love for the site to be displayed as it renders, so that even if the map is not fully rendered, the user can click links or the part of the map that is rendered.
Is there an easy way to do this? AJAX is one option, but since it is a Django website and the map depends on data from the Django template, AJAX becomes a bit unwieldy.
So is there a way to make the page visible while rendering?
(I considered making each node an iframe, so that they would be rendered individually, but that seems a bit silly too)
the django template should only render an empty map (or a map holding the first 10 points) with the javascript code firing on page ready
this javascript script should do this:
request 10 nodes from django (using a different url/view)
render the fetched nodes into the page
if no more nodes: END
goto 1.
Hope this helps
After trying a few different things, it seems that the problem was too many database queries. Each of the nodes made calls to the database while rendering, which caused them to be very slow.
For reference:
Custom filters in Django should not make database queries, if they are used heavily on a page