I'm having an issue with the template not rendering when I click the back button. From what I've read this is an issue because the parent template never goes away and the child routes should be rendered into the parent route. However, I want the users to have a clean page when they add records or edit records. I'm currently rendering the templates into named outlets on the main application template.
In this case, newrecord and editrecord should be rendered into form. However, I want the URL to be localhost/form/formID/newrecord so the user knows they're still in the form.
Question: What is the best way to achieve this? Do I have to change the routes as child resources or move them as higher level resources? Is there a better way to achieve what I want?
App.Router.map(function(){
this.resource('home', { path: '/' });
this.resource('form', { path: '/forms/:form_id' }, function() {
this.route('newrecord', { path: '/newrecord' });
this.route('editrecord', {path :'/editrecord' });
});
});
Template
<script type="text/x-handlebars" data-template-name="application">
{{ outlet }}
{{ outlet newrecord }}
{{ outlet editrecord }}
</script>
I found this was best answered here by Teddy Zenny.
Ember.js: Back button doesn't refresh index view when using nested routes
Related
Comunity
I have a list of bookings (component: BookingListItem), which I render in my component "BookingView". Now I want to show the booking details when I click on one of these booking items.
For this, I created a streched link, like that:
<router-link
:to="`patients/${this.user.id}/bookings/${booking.booking_id}`"
class="stretched-link"
></router-link>
I need the userid and the bookingid to make an api call from the ReadBookingView component (in this component the bookingdetails are displayed).
In my router.js file I defined the route like that:
{
path: "/patients/:userid/bookings/:bookingid",
name: "readbooking",
component: ReadBookingView,
},
But when I load my BookingView component the following warnings are showed:
There the userid and the bookingid are correct. But when I click on one of my booking items the following link is opened: http://URL:8081/4328
I hope y'all understand my explanation. Cause I don't understand why it's not loading correcty and I am very grateful for all your inputs.
Try
<router-link
:to="`/patients/${this.user.id}/bookings/${booking.booking_id}`"
class="stretched-link"
></router-link>
Im creating an app where I have used ionic item-divider. When I click on the list header it will re-direct to the new view where the user can update and delete the currently selected item.The problem I face is in the updation because Im unable to push the information from the first page to the second page i.e I want to push both the selected item and its sub-item so that both are edited and saved. Im using key in my controller to know what is being selected, after which I'm struggling to push the option selected and its related information to the next page for update and save it. I have attached a plunker how my first page looks.
plnkr link
Main View:
<ion-list>
<ion-item ng-model="carBrand" ng-repeat="name in carSelect">
<button ng-click="selectItem(name)">{{name.name}}</button>
<div class="item" ng-repeat="type in name.types">{{type}}</div>
</ion-item>
</ion-list>
Things you are doing wrong
you cant use
$state.go('second.html',{key});
It needs proper routing,You cant use explicit .html file to go to. You should add config part in your js like this
carService.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('first', {
url: '/first',
templateUrl: 'templates/first.html',
controller: 'carBrand'
})
.state('second', {
url: '/second',
templateUrl: 'templates/second.html',
controller: 'secondCTRL',
params: {
object: null
}
});
$urlRouterProvider.otherwise('/first');
})
after that you can only goto secong page . And for passing parameters
you should pass it through like this
$state.go('second', {object:key});
but you are using $rootScope so you dont need to pass parameters , You can use that $rootScope.selectItem in your secondController.
Hope This helps You .. Thanks
I have a web application (using ember 2.0) with 2 parts. Left menu and right content, both independent from each other.
Navigating to route name "PageRoute", application load the configuration JSON from server, process it and the checks, where should be content rendered:
{
...
position: "left",
...
}
or
{
...
position: "right",
...
}
Then I use "this.transitionTo" and redirect it to RightRoute or LeftRoute.
RightRoute is ok, LeftRoute is the problem.
At the beginning - Left menu is empty. When LeftRoute is loaded, it should append (not replace) some menu (rendered template or component).
When the LeftRoute is loaded again, new menu should be rendered from model and append it to existing left menus so it would be possible to swap between rendered menus and the last menu will be visible.
At the same time, when the current menu is swapped, it should be removed from the "left menu list" and the previous menu will be visible.
I've found some some solutions appending View, but the view is deprecated in Ember 2.0, I've tried to do it like here http://emberjs.jsbin.com/defapo/3/edit?html,js,output but Router can't access actions in components (with pushObject) and I've tried countless other methods like using data stores or dynamically modifying the model etc.
I would make it this way:
/controllers/left.js
import Ember from 'ember';
export default Ember.Controller.extend({
menus: [],
addMenu (menuData) {
this.get('menus').addObject(menuData);
},
removeMenu () {
this.get('menus').popObject();
}
});
/routes/left.js
import Ember from 'ember';
export default Ember.Route.extend({
setupController (controller, model) {
controller.addMenu(model);
}
});
/templates/left.hbs
{{#each menus as |menu| }}
<!-- render menu -->
{{log menu}}
{{/each}}
In this case when you transitionTo('left', menuData) it will append the menu to the list. When you need to remove last menu, you can do this.controllerFor('left').removeMenu() in any other route (e.g. in your PageRoute).
Hope this helps.
I'm just getting started with emberjs and I have some problems understanding how to dynamically change views within a view.
I want to have a page with a calendar.
This page has some buttons on the top to switch between different calendar views (day, week, month) and some filter options for the appointments within this view.
See this mockup:
Currently I have created a calendar route and a CalendarIndexView and template.
This template will contain the basic filter and view toggle buttons.
Within the index view I can call another view to display the grid.
<div class="calendar-container">
{{view monthView}}
</div>
The collection/context that is attached to these different views should not change because the filter is also applied on this.
The problem I have is that I don't know how to change the monthView to for example dayView after the "day" button is clicked.
Should I handle this in a router, controller or in the main calendar view?
If not view the router, how would make this view switching dynamic?
One of the core strengths of Ember is the router - everything is driven by the URL. I don't think you should part from that.
Use different routes for the different views within a calendar resource (in the router):
this.resource('calendar', { path: '/calendar' }, function() {
this.route('day');
this.route('week');
this.route('month');
});
Set the model on the calendar resource
In the nested routes (day, week (you could make month the default by using the calendar index route for it)), use the same model as in the calendar route, just filter it down to what you want. e.g.:
export default Ember.Route.extend({
model: function() {
return this.modelFor('calendar').filter(function(event) { ... });
}
});
For the people filter create a computed property in the controller that filters the events on the model and use that in the templates instead of the actual model. In that, if a person is selected, you can filter out any events without that person.
selectedPerson: null, // bind that e.g. to a select with all the people or change that with an action
filteredEvents: function() {
if (! this.get('selectedPerson')) {
return this.get('events');
}
return this.get('events').filterBy('attendee', this.get('selectedPerson'));
}.property('events.#each.attendee', 'selectedPerson')
Better than (4.): Do the filtering via query parameters. That way, you could be very flexible and even build powerful text search pretty easily...
Hope that helps and happy to see different approaches...
I'm working to create a master view cordova/javascript application where a user a presented with a list of products, then depending on what they select, got to a tabbed based detail page about the product. Each tab will be generated depending on which product they pick. Along with the product specific information being loaded, I still want to keep a list a all the products in the view so that a user could switch products when ever they want. Here's an image to help better understand what I'm talking about. .
I tried to use ember.js to get this up and running but ran into a few issues. I can get the initial list of products generated and switch to the product specific details, but once I try to load the master list of products in my second template, everything breaks. I know about including two templates with an {{outlet}} in the parent template but I cant get this to have the child inherit the parent. Is this possible to do in ember or should I start looking at other frameworks like Anuglar? Any help is appreciated.
Displaying nested templates is actually where Ember has an advantage over other frameworks, in my opinion.
This should be really simple using nested resources. In your router, you can do something like
App.Router.map(function() {
this.resource('products', function() {
this.route('product', { path: '/product_id' });
});
});
Obviously, you'll have to fetch your data in each corresponding route. Something like
App.ProductsRoute = Ember.Route.extend({
model: function() {
this.store.find('product');
}
});
App.ProductsProductRoute = Ember.Route.extend({
model: function(params) {
this.store.find('product', params.product_id);
}
});
In your product template you'll need to include an {{outlet}} for all child routes to render into (ie, products.product).
For example
product.handlebars
{{#each}}
{{name}}
{{/each}}
{{outlet}}
products/product.handlebars
Product: {{id}}
Check out the resources section in the guides.
EDIT
If you want the master list to display differently between the products template and the products.product template, remove the master list from the products template and put it in the products.index and the products.product template.
Then specify that both the ProductsIndexController and the ProductsProductController needs its parent model. This will give both templates access to the products via controllers.products.
App.ProductsIndexController = Ember.ObjectController.extend({
needs: 'products',
products: Ember.computed.alias('controllers.products')
});
App.ProductsProductController = Ember.ObjectController.extend({
needs: 'products',
products: Ember.computed.alias('controllers.products')
});
See this jsbin and the associated guides.