I am rebuilding the Gmail UI for a small project in Ember. I have made the left side bar, the actions at the top(delete, mark as read) and the message list three different components with no parent to child relationship.
I am trying to get the select all action working. I have researched a lot but I don't know how to send the action of selecting a checkbox at the top, to selecting all checkboxes in the message list. Also would I set a property on the component called isChecked? How would the top actions component know about the properties and actions of the message list component without a parent child relationship?
If you need more clarification please ask.
Related
I know the concept of Data Down / Actions Up, but I'm facing a situation on which I don't know how to do it with the DDAU. I searched on differents forum and blogs how to do it, but it does not fit my request.
I have a controller with two components.
On the first component I have a header with a button.
On the second component I have a form.
When the button is clicked, an action is trigered and catched by the controller, but how can I notify the second component of the "click" on the button on the first component.
An easy solution would have been to include the first component in the second one, but I can't do this because each component are used in many different situations.
You can use services as a bus.
Register an event on second component and trigger that event from first component.
I show it in this twiddle
If you don't want using services you can use parent-child model.
Please take a look at that twiddle
You can pass foo property from controller to both components, and first component to pass action to controller to change foo. Now this sibling component too will be notified and you can make use of didUpdateAttrs hook in sibling component to react to change.
In Data Down, Actions Up approach, what is the best way to scroll to a child component.
I have a collection of pages
{{#each pages as |page|}}
{{single-page model=page}}
{{/each}}
and I want to scrollTo a specific page number.
It would probably be a parent component that wraps what you have now, and looks something like this.
{{scrollable-pages pages=pages activePage=page)}}
Here is a twiddle that just scrolls down to the relevant page.
I'm not sure if you want to handle the scroll event ? In that case, the twiddle and relevant components will need to be expanded.
{{scrollable-pages pages=pages activePage=page onScroll=(action "changeActive")}}
So that you can handle that action and change the active page.
I would even consider another parent component in this case to manage the state, injecting a service with the pages, and handling the scroll change there.
As controllers are deprecated in Ember I try to get rid of them in my applications. So in all cases where I used the rout's method getControllerFor('nameOfTheRoute') to access other controller's methods or properties
I now would like to call something like getRouteFor('nameOfTheRoute') but this method does not exists. So what can I do to access other routes. I would be very thankful for any suggestion.
Edit:
I have an app, that is a bit like Sequel Pro for Mac OS. This app has a basic application layout with two areas one for tables (on the left) and one for table rows (on the right). Below both areas are buttons to perform actions on a table or a table row. In ember-speak these buttons are defined in the applications route. As long as no table is selected (hence there are no table rows and the rows-route is not loaded) the buttons for the rows are not active. If table rows get loaded into the rows area the buttons are getting activated. And here is the problem: When I click on a button for the rows I want to perform an action in the rows-route. When using a controller, I can use getControllerFor()and access the actions-hash. But how could I perform an action on the rows-route? Or how can change my setup to reach my goal?
Why do you need to access other routes? If you want to access parent routes, send an action to the parent route. If those routes that you want to access are not parent routes, calling them are not suitable since it conflicts with DDAU. Maybe in that case, the behaviour you want to access should be placed in a service. Or defining a component more suitable for that case.
As we know Menu Item is of three type (Display,Action & Output). In action type we we write classes which runs in background. Action type menu item is attached to a form but in the drop down the menu item is not appearing, what could be the problem? Is there any property which sets action menu-item to show or not?
Please note that it is a scenario based question. I don't have any code for this to share. Thanks
It could be several things.
First of all, are you testing with a user having System Administrator role? If not, security will apply. Then, if your menu item isn't allowed in one of your roles (menu item in a privilege which is in a duty which is in a role you have), you can't see it.
The other common issue is form personalization. So, in the contextual menu over your form, choose personalize and with buttons on top right, restore the form. You will have to close and reopen the form then.
I am looking into ember.js, after working with SproutCore 1 previously. I am looking for some examples on how to add and remove views from the DOM as the user navigates the application.
For instance, I have an application that contains a set of cases and each case has a workflow. There are also administration pages, etc.
When the user starts up the app, a dashboard-like user interface is shown. From here the user is able to search or click on a case in order to bring up that case. At this point I want to do the following:
I want to remove the GUI for the Dashboard, and i want to show the GUI for the case - which is a complex GUI in itself with its own set of navigation rules etc.
Also, within the case I want to add and remove portions of the GUI as the user navigates and manipulates the case.
When the user clicks on the "Dashboard" link, I want the current GUI to be removed, and the dashboard to be added again.
As this will be a somewhat large application I am not sure if toggling the isVisible parameter is sufficient, or if other measures needs to be taken in order to not overload the user's browser.
Is there a guide, or an example that shows how to do this ?
WARNING: OUTDATED ANSWER
A view inherits from Ember.View which means it gets some key methods. append(), which appends to body, appendTo(arg) which takes an argument and remove().
The argument is a jQuery style selector of where to insert the element in the DOM.
// my view
App.PartsView = Ember.View.extend({
...
});
// create/insert my view
App.partsView = App.PartsView.create();
App.partsView.appendTo('#partcontainer');
In my code I have a <div id="partcontainer"></div>.
// remove from DOM
App.partsView.remove();
The documentation has a good part on Building a View Hierarchy and later a section on Ember.ContainerView depending on whether you want to do it all programatically or not.