EmberJS - Transitioning to parent route renders a blank template - templates

I am trying to transition back to a parent route in Ember. Instead of the expected template only a blank template appears to be rendered with no errors being thrown.
Here's a fiddle: http://emberjs.jsbin.com/yiredoge/25/edit?html,js,output
In "Admin" > "Menu Item 1" > "Edit Item 1", when I click back on "Menu Item 1", a blank template appears to be rendered instead of the "item1" template I was expecting.
Likewise the same issue occurs in "Admin" > "Menu Item 2" > "Edit Item 2" and then clicking back on "Menu Item 2".
I'm new to Ember so no doubt this is the intended behaviour and I'm doing something wrong but I can't seem to pick it apart using the documentation.
Many thanks.

Related

Element should have been "select" but was "button"

org.openqa.selenium.support.ui.UnexpectedTagNameException:
I facing this exception while select a dropdown
How to select dropdown using this tag name as button

Return values from ionic2 modal to parent page

I am opening a Modal in ionic2, to search the values from a list. After search, I want to get the selected values back in my parent screen.
searchRooms(){
let modal = this.modalCtrl.create(RoomSearch);
modal.present();
}
This opens my search Modal and there I have list of available rooms. If user click on any room then I want to return back the value to parent page. I am not sure how to do this.
From documentation I feel NavConroller.pop can be used to pass back the values but I don't know how to use that.
Thanks in advance.
You can use onDidDismiss method explained in the Modal Controller.
In the page that opens your modal you can do :
let modal = this.modalCtrl.create(RoomSearch);
modal.onDidDismiss(data => {
// Do things with data coming from modal, for instance :
console.log(data);
});
modal.present();
And this in your modal controller, to close the modal :
this.viewCtrl.dismiss({"foo" : "bar"});

force re-render of custom textfield view

How to force to re-render a custom textfield view?
I create a:
App.Select2View = Ember.TextField.extend({didInsertElement:function() {//plugin called here}});
It's included in a template form and when the form is open and I select another/different item, this custom textfield view (based on select 2) doesn't re-render but stays the same.
I have nested routes/resources. Company under companies. When I select a company I have readonly info and edit button that if clicked calls action on the Company controller to "isEditing" state, in this state a form is open. If I change the state to false it goes back into read only model (viewing the company info).
It's fine if I set it back to read only mode first, and then open another item and the select2 is rendered with this companies data.
But if it's in the isEditing state, with form open and I navigate to another company item all form input fields change according to model (such as name will change because it's binded to the name key value of the company model), but the select2 stays the same as previous.
I'm not sure how to re-render this in Ember.
This is defined as partial in template under the main company template view:
<script type="text/x-handlebars" id="company/_edit">
<p>{{input type="text" value=name}}</p>
<p>
{{view "select2"
prompt="Search for companies"
resource="results"
displayKey="text"
onSelect="addCompany"
onDeSelect="removeCompany"
}}
</p>
</script>
Any pointers are appreciated.
I'm new to Ember and my answer might not be apt, but based on my experiments the problem is that Ember caches as much as possible. So it won't re-render the view completely with the select2, only when view is in a certain state previous state followed by next state will it automatically re-render.
The solution atleast for now seems to be to add a "valueChange" method with observer on "value" change on the select2 custom TextField and make the same call as in "didInsertElement" (which executes when the view is rendered):
valueChange: function() {
Ember.run.scheduleOnce('afterRender', this, 'setupSelect2');
}.observes('value'),
Now even if I'm in the "edit" state, it will update this select2 as well, not just the standard form inputs tied specifically to the model. I can now navigate to any item in "edit" state which has form open for each item selected and values change correspondingly in the select2.

Ember.js ToDoMVC - Chrome firing ObjectController action multiple times

I have been following the getting started guide for ember.
I have come to the parts that deal with editing and removing items and have come across a problem that seems to occur in chrome but not firefox.
The custom component "edit-todo" has 2 events that are linked to the action "acceptChanges"
{{#if isEditing}}
{{edit-todo class="edit" value=title focus-out="acceptChanges" insert-newline="acceptChanges"}}
{{else}}
The "acceptChanges" action fires the "removeTodo" action if the item's title is empty
acceptChanges: function () {
this.set('isEditing', false);
if (Ember.isEmpty(this.get('model.title'))) {
this.send('removeTodo');
} else {
this.get('model').save();
}
},
removeTodo: function () {
var todo = this.get('model');
todo.deleteRecord();
todo.save();
}
If you edit an item, delete the text and press enter or switch focus, the item gets deleted. This works perfectly for me in Firefox.
In Chrome however, the acceptChanges action is firing twice if you delete the title and press enter. When the DOM updates to remove the item, the acceptChanges action is fired again, presumably because it loses focus.
This jsbin shows the problem, it is essentially just the code from the guide with some console logs. If you edit the item "BBB", delete the text and press enter, the data for "CCC" is deleted also. It remains in the DOM but you can no longer interact with the item and the items remaining count is wrong. If you open ember inspector in the developer tools you can see that the only data left is for the item "AAA".
I am wondering if this is a bug with ember, with ember-data, with chrome, or if it is expected behaviour that I should be checking for in my js?
I am using Chrome Version 26.0.1410.63

UITabBar item did select is not working

i have two tab bar items with two different table view with navigation controllers.
by clicking on the tab1--- table1 is opening...Good. but when i did select on table1 it goes to the another view (table did select view)....every thing is good.
but the problem here is
when i am clicking on tab2 ----table 2 is opening....Good.
But again clicking on tab1------ it is not loading the table1....it is loading (table did select view) view. As the last time i left it there.
i want to open table1----on clicking on tab1......by programming.
help me
That is the expected behaviour if you are using the tab bar controller and the navigation controller in the item of the tab bar. User will expect the tab to retain the state of the view.
If you still want to enforce the app to go back to the root view controller of the navigation controller when user goes back to the tab, you can implement the UITabBarControllerDelegate tabBarController:didSelectViewController: method. What this delegate method does is:
Tells the delegate that the user selected an item in the tab bar.
Then call the method of UINavigationController called popToRootViewControllerAnimated: when user tap on the tab. This will help you to:
Pops all the view controllers on the stack except the root view
controller and updates the display.
For example:
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController
{
if(viewController == yourNavigationController) {
UINavigationController *navigationController = (UINavigationController *)viewController;
[navigationController popToRootViewControllerAnimated:NO];
}
}