It seems like if you want to animate a transition between states using the new Ember.js router and outlets, you're out of luck, since the previous content of an outlet will be destroyed before you have a chance to animate it. In cases where you can completely animate one view out before transitioning to the new state, there's no problem. It's only the case where both old and new views need to be visible that's problematic.
It looks like some of the functionality needed to animate both the previous outlet content and the new was added in this commit, but I'm not sure I understand how to use it.
There's also been some discussion about using extra transitional routes/states to explicitly model the "in-between" states that animations can represent (here and here), but I'm not sure if it's currently possible to match this approach up with outletted controllers and views.
This is similar to How *not* to destroy View when exiting a route in Ember.js, but I'm not sure overriding the outlet helper is a good solution.
Any ideas?
I am currently overriding didInsertElement and willDestroyElement in some of my view classes to support animations. didInsertElement immediately hides the element and then animates it into view. willDestroyElement clones the element and animates it out of view.
didInsertElement: function ()
{
this.$().slideUp(0);
this.$().slideDown(250, "easeInOutQuad");
},
willDestroyElement: function ()
{
var clone = this.$().clone();
this.$().replaceWith(clone);
clone.slideUp(250, "easeInOutQuad");
}
Personally, I don't want to start wrapping my outlets in superfluous ContainerViews just to support animations.
You should check this out: https://github.com/billysbilling/ember-animated-outlet.
Then you can do this in your Handlebars templates:
{{animatedOutlet name="main"}}
And transition from within a route like this:
App.ApplicationRoute = Ember.Route.extend({
showInvoice: function(invoice) {
this.transitionToAnimated('invoices.show', {main: 'slideLeft'}, invoice);
}
});
Related
What are the downsides to not following this process?
let parent = UIViewController()
let child = UIViewController()
parent.view.addSubview(child.view)
parent.addChild(child)
child.didMove(toParent: parent)
// and to remove
child.willMove(toParent: nil)
child.removeFromParent()
child.view.removeFromSuperview()
and instead just doing something more on the order of
let parent = UIViewController()
let child = UIViewController()
parent.view.addSubview(child.view)
// and to remove
child.view.removeFromSuperview()
My specific desire is to use SwiftUI views in place of UIViews sprinkled through my project, but officially you're supposed to use a UIHostingController and embed it as a child view controller of whatever parent view controller it belongs to.
I was previously under the impression that you have to call these methods, but then another developer suggested I just try not calling them with the assumption I'm only missing out on view controller lifecycle events (which I don't think matter to me in most cases). I've since tried it and it worked, but I'm worried about what I'm missing/why this might be a bad idea.
I recently came across an example of something you might lose if you don't add the UIHostingViewContoller as a child of the parent view controller in this article about using SwiftUI views in self-sizing table view cells. If you don't add it as a child, the height of the cell holding its view is not always calculated correctly.
https://noahgilmore.com/blog/swiftui-self-sizing-cells/#view-controller-containment
What is the best technique to generically change to a busy cursor during transition to a new route in Ember.js (1.13.10)? With data retrieval, this may take a couple of seconds.
The answer here indicates a method to do this with saving data:
Changing mouse cursor while Ember content is saving
...and indicates this is very straight forward with route transitions, but I can't seem to find an example or anything in the documentation.
Thanks in advance for any help on this.
We can use loading hook of Route.
app/routes/application.js:
import Ember from 'ember';
export default Ember.Route.extend({
actions: {
loading(transition, route) {
$('body').css({ cursor : 'wait' });
this.router.one('didTransition', () => {
$('body').css({ cursor: 'default' });
});
return true; // Bubble the loading event
}
}
});
Working demo. (output is sandboxed so make sure your mouse is over body in output window)
Full code behind demo.
I've used $('body') as element to style cursor. You can probably use more global approach.
A few months back ember.js changed the scoping of "actions" that get invoked from something like a button click. For example, in the below handlebars template if I click "save"
<button type="submit" {{action updateModel model}}>Save</button>
It bubbles up to the actions on my controller like so
actions: {
updateModel: function(model) {
var name = model.get('name');
//if I want to hit a mixin or instance method
//I am forced to use "send" but how can I send
//state to this method? or is this even the way
//ember wants you to "reuse" code from within
//an action?
}
}
The problem is, if I have a complex action and I want to share code between controllers. What is the "correct" way to share even a simple "validate" like method when I'm stuck inside an "action" like this?
So, I was hoping to be able to create a helper (master) view for my application, the main reason is that I want to implement a resize function.
Example.
App.View = Ember.View.extend({
init: function() {
$(window).resize(this.resize.bind(this));
this._super();
}
});
And then extend it
App.AmazingView = App.View.extend({
resizing: false,
resize: function() {
this.set('resize', true);
}
});
So, that's an example of what I wanted to achieve, but unfortunately it causes some problems.
If I go to the route that is using the Amazing view then everything works fine, it's only until you navigate around the application after and then return to that same route I face the following error.
Uncaught Error: Something you did caused a view to re-render after it rendered but before it was inserted into the DOM.
I'm pretty sure this is happening because I'm extending that view, any ideas on why this happens or what I should actually be doing?
When you do $(window).resize(this.resize.bind(this)); you are attaching an event not managed for ember. When you leave the view, transitioning to other route, ember will cleanup event listeners and destroy the view. Now your view is in a "dead" state. But the resize handler is still present and when it triggers, a change is performed in a dead view. I think that it is causing your problem.
You can use the didInsertElement and willClearRender to bind and unbind your event.
App.View = Ember.View.extend({
_resizeHandler: null,
didInsertElement: function() {
this._super();
// we save the binded resize function to keep the identity, so unbind will remove
this._resizeHandler = this.resize.bind(this);
$(window).bind('resize', this._resizeHandler);
},
willClearRender: function() {
this._super();
$(window).unbind('resize', this._resizeHandler);
}
});
This sound like a feature that would fit perfectly into an ember mixin. This solution would offer more flexibility, then you could extend other views and also provide the resize features...
http://emberjs.com/api/classes/Ember.Mixin.html
I am trying to get my head round the connectOutlet method and when a view that is returned from connectOutet is actually inserted into the DOM.
The view that is created in connectOutlet leaves connectOutlet in the preRender state.
connectOutlet: function(name, context) {
// method body
view = this.createOutletView(outletName, viewClass);
if (controller) { set(view, 'controller', controller); }
set(this, outletName, view);
return view;
}
I've not tracked down where or when the view is inserted into the Dom and the view transitions to the inDom state.
I suspect the runloop is at play and it transitions after the current runloop has finished.
Can anyone shed any light on this?
The run loop is indeed in play here. The run loop processes events by draining an ordered collection of queues. In order, they are: sync, actions, render, afterRender, destroy, and timers. View rendering is where the view is actually inserted into the DOM and it is always scheduled on the render queue.
If you have other questions about this, leave a comment, and I will be happy to expand this answer to cover them.