update docs re:onbeforeremove and clean up

This commit is contained in:
Leo Horie 2016-12-26 12:28:13 -05:00
parent 78b9a082ac
commit bedcd8bdbf
5 changed files with 14 additions and 18 deletions

View file

@ -110,8 +110,8 @@ m("div", {
onbeforeupdate : function(vnode, old) { /*...*/ },
// Called after the node is updated
onupdate : function(vnode) { /*...*/ },
// Called before the node is removed, call done() when ready for the node to be removed from the DOM
onbeforeremove : function(vnode, done) { /*...*/ },
// Called before the node is removed, return a Promise that resolves when ready for the node to be removed from the DOM
onbeforeremove : function(vnode) { /*...*/ },
// Called before the node is removed, but after onbeforeremove calls done()
onremove : function(vnode) { /*...*/ }
});

View file

@ -63,9 +63,12 @@ var ComponentWithHooks = {
onupdate: function(vnode) {
console.log("DOM updated")
},
onbeforeremove: function(vnode, done) {
onbeforeremove: function(vnode) {
console.log("exit animation can start")
done()
return new Promise(function(resolve) {
// call after animation completes
resolve()
})
},
onremove: function(vnode) {
console.log("removing DOM element")

View file

@ -249,9 +249,9 @@ Hook | Description
`oninit(vnode)` | Runs before a vnode is rendered into a real DOM element
`oncreate(vnode)` | Runs after a vnode is appended to the DOM
`onupdate(vnode)` | Runs every time a redraw occurs while the DOM element is attached to the document
`onbeforeremove(vnode, done)` | Runs before a DOM element is removed from the document, and only triggers the actual removal of the DOM element when the `done` callback is called. This method is only triggered on the element that is detached from its parent DOM element, but not on its child elements.
`onbeforeremove(vnode)` | Runs before a DOM element is removed from the document. If a Promise is returned, Mithril only detaches the DOM element after the promise completes. This method is only triggered on the element that is detached from its parent DOM element, but not on its child elements.
`onremove(vnode)` | Runs before a DOM element is removed from the document. If a `onbeforeremove` hook is defined, `onremove` is called after `done` is called. This method is triggered on the element that is detached from its parent element, and all of its children
`onbeforeupdate(vnode, old)` | Runs before `onupdate` and if it returns `false`, it prevents a diff for the element and all of its children
`onbeforeupdate(vnode, old)` | Runs before `onupdate` and if it returns `false`, it prevents a diff for the element and all of its children
To learn more about lifecycle methods, [see the lifecycle methods page](lifecycle-methods.md).

View file

@ -130,7 +130,7 @@ m(RedrawReporter, {data: "Hello"})
### onbeforeremove
The `onbeforeremove(vnode, done)` hook is called before a DOM element is detached from the document. Mithril only detaches the DOM element after the `done` callback is called. The `done` callback can be called asynchronously, making it possible to run exit animations before detaching the element.
The `onbeforeremove(vnode)` hook is called before a DOM element is detached from the document. If a Promise is returned, Mithril only detaches the DOM element after the promise completes.
This hook is only called on the DOM element that loses its `parentNode`, but it does not get called in its child elements.
@ -138,9 +138,11 @@ Like in other hooks, the `this` keyword in the `onbeforeremove` callback points
```javascript
var Fader = {
onbeforeremove: function(vnode, done) {
onbeforeremove: function(vnode) {
vnode.dom.classList.add("fade-out")
setTimeout(done, 1000)
return new Promise(function(resolve) {
setTimeout(resolve, 1000)
})
},
view: function() {
return m("div", "Bye")

View file

@ -370,15 +370,6 @@ module.exports = function($window) {
}
}
}
function once(f) {
var called = false
return function() {
if (!called) {
called = true
f()
}
}
}
function removeNode(vnode, context) {
var expected = 1, called = 0
if (vnode.attrs && vnode.attrs.onbeforeremove) {