Merge remote-tracking branch 'origin/rewrite' into rewrite
Conflicts: docs/keys.md docs/signatures.md docs/v1.x-migration.md index.js ospec/bin/ospec.cmd request/request.js request/tests/test-xhr.js util/prop.js util/tests/index.html util/tests/test-prop.js
This commit is contained in:
commit
bce2abbffd
107 changed files with 1989 additions and 1970 deletions
|
|
@ -227,7 +227,7 @@ To learn more about components, [see the components page](components.md).
|
|||
|
||||
### Lifecycle methods
|
||||
|
||||
Vnodes and components can have lifecycle methods (also known as *hooks*), which are called at various points during the lifetime of a DOM element. The lifecycle methods supported by Mithril are: `oninit`, `oncreate`, `onupdate`, `onbeforeremove`, `onremove`, and `onbeforeupdate`.
|
||||
Vnodes and components can have lifecycle methods (also known as *hooks*), which are called at various points during the lifetime of a DOM element. The lifecycle methods supported by Mithril are: `oninit`, `oncreate`, `onupdate`, `onbeforeremove`, `onremove`, and `onbeforeupdate`.
|
||||
|
||||
Lifecycle methods are defined in the same way as DOM event handlers, but receive the vnode as an argument, instead of an Event object:
|
||||
|
||||
|
|
@ -307,7 +307,7 @@ m("ul", users.map(function(u) { // <ul>
|
|||
})) // </ul>
|
||||
|
||||
// ES6:
|
||||
// m("ul", users.map(u =>
|
||||
// m("ul", users.map(u =>
|
||||
// m("li", u.name)
|
||||
// ))
|
||||
```
|
||||
|
|
@ -390,7 +390,7 @@ var BadListComponent = {
|
|||
for (var i = 0; i < vnode.attrs.items.length; i++) {
|
||||
list.push(m("li", vnode.attrs.items[i]))
|
||||
}
|
||||
|
||||
|
||||
return m("ul", list)
|
||||
}
|
||||
}
|
||||
|
|
@ -407,4 +407,4 @@ var BetterListComponent = {
|
|||
}))
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -204,4 +204,4 @@ If a design-based solution is not feasible, and you must optimize a UI with a la
|
|||
|
||||
Avoid applying the optimization to other areas of your application "just-in-case". Remember that, generally speaking, more code incurs a higher maintenance cost than less code, and `onbeforeupdate` related bugs can be especially difficult to troubleshoot if you rely on object identity for its conditional checks.
|
||||
|
||||
Again, **the `onbeforeupdate` hook should only be used as a last resort.**
|
||||
Again, **the `onbeforeupdate` hook should only be used as a last resort.**
|
||||
|
|
|
|||
|
|
@ -32,4 +32,3 @@ This method is internally called by [`m.mount()`](mount.md), [`m.route()`](route
|
|||
The `m.render` module is similar in scope to view libraries like Knockout, React and Vue. It is less than 500 lines of code (3kb min+gzip) and implements a virtual DOM diffing engine with a modern search space reduction algorithm and DOM recycling, which translate to top-of-class performance, both in terms of initial page load and re-rendering. It has no dependencies on other parts of Mithril and can be used as a standalone library.
|
||||
|
||||
Despite being incredibly small, the render module is fully functional and self-suficient. It supports everything you might expect: SVG, custom elements, and all valid attributes and events - without any weird case-sensitive edge cases or exceptions. Of course, it also fully supports [components](components.md) and [lifecycle methods](lifecycle-methods.md).
|
||||
|
||||
|
|
|
|||
|
|
@ -105,10 +105,10 @@ Here's the example snippet for the [Facebook Like button](https://developers.fac
|
|||
}(document, 'script', 'facebook-jssdk'));</script>
|
||||
|
||||
<!-- Your like button code -->
|
||||
<div class="fb-like"
|
||||
data-href="http://www.your-domain.com/your-page.html"
|
||||
data-layout="standard"
|
||||
data-action="like"
|
||||
<div class="fb-like"
|
||||
data-href="http://www.your-domain.com/your-page.html"
|
||||
data-layout="standard"
|
||||
data-action="like"
|
||||
data-show-faces="true">
|
||||
</div>
|
||||
```
|
||||
|
|
@ -153,4 +153,4 @@ Unicode characters for accented characters can be typed using a keyboard layout
|
|||
|
||||
All characters that are representable as HTML entities have unicode counterparts, including non-visible characters such as ` ` and `­`.
|
||||
|
||||
To avoid encoding issues, you should set the file encoding to UTF-8 on the Javascript file, as well as add the `<meta charset="utf-8">` meta tag in the host HTML file.
|
||||
To avoid encoding issues, you should set the file encoding to UTF-8 on the Javascript file, as well as add the `<meta charset="utf-8">` meta tag in the host HTML file.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
Migrating from `v0.2.x` to `v1.x`
|
||||
=================================
|
||||
# Migrating from `v0.2.x` to `v1.x`
|
||||
|
||||
`v1.x` is largely API-compatible with `v0.2.x`, but there are a few breaking changes.
|
||||
|
||||
|
|
@ -11,6 +10,7 @@ Migrating from `v0.2.x` to `v1.x`
|
|||
- [`m.route` and anchor tags](#mroute-and-anchor-tags)
|
||||
- [Reading/writing the current route](#readingwriting-the-current-route)
|
||||
- [Accessing route params](#accessing-route-params)
|
||||
- [Setting route prefix](#setting-route-prefix)
|
||||
|
||||
## `config` function
|
||||
|
||||
|
|
@ -84,10 +84,10 @@ In `v1.x` there is no more `controller` property in components, use `oninit` ins
|
|||
m.mount(document.body, {
|
||||
controller : function() {
|
||||
var ctrl = this;
|
||||
|
||||
|
||||
ctrl.fooga = 1;
|
||||
},
|
||||
|
||||
|
||||
view : function(ctrl) {
|
||||
return m("p", ctrl.fooga);
|
||||
}
|
||||
|
|
@ -101,7 +101,7 @@ m.mount(document.body, {
|
|||
oninit : function(vnode) {
|
||||
vnode.state.fooga = 1;
|
||||
},
|
||||
|
||||
|
||||
view : function(vnode) {
|
||||
return m("p", vnode.state.fooga);
|
||||
}
|
||||
|
|
@ -112,13 +112,13 @@ m.mount(document.body, {
|
|||
m.mount(document.body, {
|
||||
oninit : function(vnode) {
|
||||
var ctrl = this; // this is bound to vnode.state by default
|
||||
|
||||
|
||||
ctrl.fooga = 1;
|
||||
},
|
||||
|
||||
|
||||
view : function(vnode) {
|
||||
var ctrl = this; // this is bound to vnode.state by default
|
||||
|
||||
|
||||
return m("p", ctrl.fooga);
|
||||
}
|
||||
});
|
||||
|
|
@ -135,7 +135,7 @@ var component = {
|
|||
controller : function(options) {
|
||||
// options.fooga === 1
|
||||
},
|
||||
|
||||
|
||||
view : function(ctrl, options) {
|
||||
// options.fooga == 1
|
||||
}
|
||||
|
|
@ -151,7 +151,7 @@ var component = {
|
|||
oninit : function(vnode) {
|
||||
// vnode.attrs.fooga === 1
|
||||
},
|
||||
|
||||
|
||||
view : function(vnode) {
|
||||
// vnode.attrs.fooga == 1
|
||||
}
|
||||
|
|
@ -254,3 +254,19 @@ m.route(document.body, "/booga", {
|
|||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Setting route prefix
|
||||
|
||||
In `v0.2.x` the route prefix could be set by assigning a string of `"pathname"`, `"hash"`, or `"search"` to `m.route.mode`. In `v1.x` this has been replaced by `m.route.prefix` which is a setter function. Passing it an empty string is analogous to using pathname mode. Other options include passing `"#"` for hash and `"?"` for search.
|
||||
|
||||
### `v0.2.x`
|
||||
|
||||
```js
|
||||
m.route.mode = "pathname";
|
||||
```
|
||||
|
||||
### `v1.x`
|
||||
|
||||
```js
|
||||
m.route.prefix("");
|
||||
```
|
||||
|
|
|
|||
|
|
@ -99,4 +99,4 @@ Only element tag names and components can be the first argument of the `m()` fun
|
|||
|
||||
The `mithril/render/node` module is used by Mithril to generate all vnodes. This ensures modern Javascript engines can optimize virtual dom diffing by always compiling vnodes to the same hidden class.
|
||||
|
||||
When creating libraries that emit vnodes, you should use this module instead of writing naked Javascript objects in order to ensure a high level of rendering performance.
|
||||
When creating libraries that emit vnodes, you should use this module instead of writing naked Javascript objects in order to ensure a high level of rendering performance.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue