I have some child views that I'm programmatically pushing into a container view during the didInsertElement event of the container view. I then perform some jquery actions on the rendered child view DOM elements during their didInsertElement events. This setup works fine when I refresh the page. But when I transition into the page via a link-to, the didInsertElement events of the child views are triggered when they are in the "preRender" state, and before they've been inserted into the DOM.
Why would the didInsertElement event get triggered during "preRender"? What would cause the difference in behavior of the child views when refreshing page as opposed to transitioning into page via the router?
I don't know why you receive this problem, but sometimes using the afterRender queue solves the problem.
App.SomeView = Ember.ContainerView.extend({
didInsertElement: function() {
// here your view is in rendered state, but the child views no
Ember.run.scheduleOnce('afterRender', this, this._childViewsRendered);
},
_childViewsRendered: function() {
// here your child views is in the rendered state
}
});
The after render queue is executed when all rendering is finished, so probally your child views will be in the inDOM state instead of preRender.
I hope it helps
While you refresh, the dom gets created and your jquery actions/events works fine and when you transition to a differenct page and come back via the url the jquery events/actions attached to the dom are still there hence they fire before the rendering.
The solution is to clean up the jquery related stuff after the view has been removed from the DOM using willDestroyElement:
App.MyAwesomeComponent = Em.Component.extend({
didInsertElement: function(){
this.$().on('click', '.child .elem', function(){
// do stuff with jQuery
});
},
willDestroyElement: function(){
this.$().off('click');
}
});
for more on this please visit this tutorial
Related
I've got a Ember CLI based blog. I currently resize all <img> inside posts upon clicking them using this function inside the application-controller.
I rely on on('init') and Ember.run.later and this feels just dirty.
How can I improve the subscription code below?
import Ember from 'ember';
export default Ember.ArrayController.extend({
imageScaling: function() {
Ember.run.later((function() {
//Subscribe to the actual event
Ember.$(".post-content img").on("click", function(){
// RESIZE HERE
})
}), 3000)
}.on('init')
});
If you're inserting all of your images inside Ember templates, you can always use the action helper:
<img {{action 'scaleImages' on='click'}} src='' />
I realize that's probably not the case though. The way I've dealt with DOM interactions in the past is to override the application view then set up and tear down my event handler there. You can also avoid the Ember.run.later call by modifying your jQuery event listener. Here's how I would do it:
// app/views/application.js
export default Ember.View.extend({
setupImageScaling: function() {
$('body').on('click.image-scaling', 'img', function() {
// RESIZE HERE
});
}.on('didInsertElement'),
teardownImageScaling: function() {
$('body').off('click.image-sacling');
}.on('willDestroyElement')
});
In my opinion, the above is the 'most Ember' way of handling this kind of situation.
Hi I have a view call AutocompleteView its job is to put google places autocomplete on landing page.There is no map rendered on this page just a textbox.
what I am try to achieve is user should just use autocomplete textbox on landing page. On entering some place of choice. I will transition the user to a specific route where the same AutocompleteView will be rendered with map so tha user can change his choice of place.
When user chang the location on the page where map is rendered no transition is needed here
the approch I am trying is I check the parent view where
{{view AutocompleteView}}
has been rendered using this.get('ParentView") and based on the parent view
say if ParentView is Application(landing page) I will transition or else no transition will occur.
I have no good experienve of javascript mvc my doubt
Is it right to rely on ParentView for just transtions or is there a better way??
App.AutocompleteAddressView = Ember.View.extend({
tagName: 'input',
didInsertElement: function() {
var options = {
componentRestrictions: {country: "xx"}
};
var autocomplete = new google.maps.places.Autocomplete(this.$()[0], options);
console.log(this.get('parentView'));
}
});
It sounds like what you want is to handle the action of "entering text in the search box" differently based on which route is currently active -- the landing page or the results page.
The Ember way to do this is to trigger an action from your view using this.get('controller').send(#{actionName}). That action will bubble up from the view's controller to the current route. Then you can handle that action differently depending on which route is active, e.g.:
App.IndexRoute = Em.Route.extend({
...
actions: {
search: function() {
# transition to results page
}
}
});
App.ResultsRoute = Em.Route.extend({
...
actions: {
search: function() {
# update visible results
}
}
});
To make this easier, you might want to use a subclass of Ember.TextField for your AutocompleteAddressView. Then you can define an action property on your view that will automatically get triggered when the user types enter/return.
I'm attempting to render all my modals through application routing, but I'm having trouble figuring out the proper way to return to a previous state after I dismiss the modal.
Here's the basic setup:
I have an outlet in my application template which I'm using to display modal dialogs.
It looks something like:
{{ outlet modal }}
In my route mappings, I've defined hooks for the individual modal. For instance, my help dialog pops up with:
App.HelpRoute = Ember.Route.extend({
renderTemplate: function(controller, model) {
this.render({ outlet: 'modal' });
}
});
Right now, I can display my modal through the uri:
foo.com/#/help
I have a hook to dismiss the modal using jQuery:
$('#modalHelpWindow').modal('hide');
But this doesn't really help, because I'm just hiding the element. I need to update URI on dismissal. If I hit the same route again, the modal is already hidden, and doesn't display.
What methods should I be using to dismiss the modal, and route the application back to its previous state? Should I just be using history.back()?
Note, I am aware of this SO question, but the solution is not the preferred 'ember' way of doing things, as programmatically created views will not have their controllers associated properly What's the right way to enter and exit modal states with Ember router v2?
Looks like I can hook up the hidden handler to do a history.back() call in my view's didInsertElement method, a la:
didInsertElement: function() {
var $me = this.$();
$me.modal({backdrop:"static"});
$me.on('hidden', function() {
history.back();
});
},
I'm having trouble figuring out how to properly populate and accept an update from an Ember form under RC1. I've boiled it down to the bare essentials in this jsfiddle. I've made it far enough to display the form for a particular entity (user with first and last name) and the current values populate in the fields. However, as the user types, the fields actually update with each keystroke, and clicking the back button reveals that the data has already been changed without clicking the update button. I'd prefer to keep some logic in between the updates and only confirm an update after the user clicks the update button.
{{#view App.PersonFormView}}
First name: {{view Ember.TextField valueBinding="firstName"}}
Last name: {{view Ember.TextField valueBinding="lastName"}}
<button {{action "updatePerson"}}>Update</button>
{{/view}}
In the form template, I was trying to follow one of the Ember.js examples, but doing so resulted in a long delay and a monstrous deprecation warning using RC1. I think the examples are still being updated. I'd prefer a more handlebars-elegant way of coding the form if it existed.
The second problem is that I cannot capture the submit event itself, either on the form view or the controller. I don't know where this event is going.
App.PersonFormController = Ember.ObjectController.extend({
updatePerson: function(params){
// this doesn't get triggered as I would have expected
console.log('controller updatePerson: '+params);
}
});
App.PersonFormView = Ember.View.extend({
tagName: 'form',
updatePerson: function(params){
// this doesn't get triggered either!
console.log('updatePerson params: '+params);
}
});
In summary, I need to:
populate the input fields with the values without having them linked directly back to the model's data while the user is typing
catch the submit button's (or other control would be fine) clicked event along with the fields - and the entity's id - so that I can set them back on the model's data manually
There are several things:
I cannot capture the submit event itself
Events are fired in the controller and the route, not the view. The reason why your controller PersonFormController wasn't catching the event, is because the name is wrong. The controller should be named after the route: EditPersonController.
It's generally good to pass the model along with the action:
<button {{action "updatePerson" content}}>Update</button>
Here is an updated version that catches the event: http://jsfiddle.net/teddyzeenny/L9HMm/5/
populate the input fields with the values without having them linked directly back to the model's data
It's generally good practice to bind the fields directly to the model, to avoid code duplication.
Your problem is not that the fields are bound directly to the model, it's that you have no control over what is happening (saved, not saved, left the route...)
To have solid control, it's best to put your updating logic in your route. That way you can act accordingly when the user enters/leaves the route.
To catch your events in the route:
App.EditPersonRoute = Ember.Route.extend({
events: {
updatePerson: function(record) {
record.one('didUpdate', this, function() {
this.transitionTo('index');
});
record.get('transaction').commit();
}
}
});
To rollback changes if the user doesn't click on Update, use the deactivate callback in the route:
App.EditPersonRoute = Ember.Route.extend({
deactivate: function() {
this.modelFor('editPerson').get('transaction').rollback();
},
events: {
updatePerson: function(record) {
record.one('didUpdate', this, function() {
this.transitionTo('index');
});
record.get('transaction').commit();
}
}
});
Now these won't work in the fiddle since you are not using ember-data models.
I have button views that are part of a set of Ember.js form helpers I wrote. E.g. MyAddressFormView has the following template:
{{#form}}
{{textArea address}}
{{submitButton}}
{{cancelButton}}
{{/form}}
To handle the "Submit" button, I let the "submit" form event bubble, and handle it in the submit method of MyAddressFormView.
But how do I do the same for the "Cancel" button? For instance, is there any way I can trigger a custom "cancel form" event in a child view, let it bubble, and handle it in an ancestor view?
I would suggest triggering a jQuery special event and registering the event with a mapping on your Ember app. For example:
Ember.Application.create({
customEvents: {
// key is the jquery event, value is the name used in views
formcancel: 'formCancel'
}
});
And in your cancelButton view:
click: function(evt){
Ember.$().trigger('formcancel')
}
This will bubble in the same way that other mapped Ember DOM events do.
Ember.ActionHandler bubbles events through its "target" property. It's possible to override Ember.View's target to let events bubble through parentViews by default.
Include this mixin first:
(function() {
Ember.View.reopen({
// Let actions bubble to parentView by default.
target: function() {
return this.get('parentView');
}.property('parentView')
});
})();
Then just send the event like you'd normally do:
tap: function() { this.send('someEvent'); }