update docs re:onbeforeremove and clean up
This commit is contained in:
parent
78b9a082ac
commit
bedcd8bdbf
5 changed files with 14 additions and 18 deletions
|
|
@ -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) { /*...*/ }
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue