lint and highlight jsx
This commit is contained in:
parent
6345859e19
commit
a0def08101
4 changed files with 41 additions and 38 deletions
|
|
@ -12,13 +12,13 @@ Mithril automatically redraws after DOM event handlers that are defined in a Mit
|
|||
|
||||
```javascript
|
||||
var MyComponent = {
|
||||
view: function() {
|
||||
return m("div", {onclick: doSomething})
|
||||
}
|
||||
view: function() {
|
||||
return m("div", {onclick: doSomething})
|
||||
}
|
||||
}
|
||||
|
||||
function doSomething() {
|
||||
//a redraw happens synchronously after this function runs
|
||||
// a redraw happens synchronously after this function runs
|
||||
}
|
||||
|
||||
m.mount(document.body, MyComponent)
|
||||
|
|
@ -28,14 +28,14 @@ You can disable an auto-redraw for specific events by setting `e.redraw` to `fal
|
|||
|
||||
```javascript
|
||||
var MyComponent = {
|
||||
view: function() {
|
||||
return m("div", {onclick: doSomething})
|
||||
}
|
||||
view: function() {
|
||||
return m("div", {onclick: doSomething})
|
||||
}
|
||||
}
|
||||
|
||||
function doSomething(e) {
|
||||
e.redraw = false
|
||||
// no longer triggers a redraw when the div is clicked
|
||||
e.redraw = false
|
||||
// no longer triggers a redraw when the div is clicked
|
||||
}
|
||||
|
||||
m.mount(document.body, MyComponent)
|
||||
|
|
@ -48,7 +48,7 @@ Mithril automatically redraws after [`m.request`](request.md) completes:
|
|||
|
||||
```javascript
|
||||
m.request("/api/v1/users").then(function() {
|
||||
//a redraw happens after this function runs
|
||||
// a redraw happens after this function runs
|
||||
})
|
||||
```
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ You can disable an auto-redraw for a specific request by setting the `background
|
|||
|
||||
```javascript
|
||||
m.request("/api/v1/users", {background: true}).then(function() {
|
||||
//does not trigger a redraw
|
||||
// does not trigger a redraw
|
||||
})
|
||||
```
|
||||
|
||||
|
|
@ -67,21 +67,21 @@ Mithril automatically redraws after [`m.route.set()`](route.md#mrouteset) calls
|
|||
|
||||
```javascript
|
||||
var RoutedComponent = {
|
||||
view: function() {
|
||||
return [
|
||||
// a redraw happens asynchronously after the route changes
|
||||
m("a", {href: "/", oncreate: m.route.link}),
|
||||
m("div", {
|
||||
onclick: function() {
|
||||
m.route.set("/")
|
||||
}
|
||||
}),
|
||||
]
|
||||
}
|
||||
view: function() {
|
||||
return [
|
||||
// a redraw happens asynchronously after the route changes
|
||||
m("a", {href: "/", oncreate: m.route.link}),
|
||||
m("div", {
|
||||
onclick: function() {
|
||||
m.route.set("/")
|
||||
}
|
||||
}),
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
m.route(document.body, "/", {
|
||||
"/": RoutedComponent,
|
||||
"/": RoutedComponent,
|
||||
})
|
||||
```
|
||||
|
||||
|
|
@ -97,13 +97,13 @@ If you need to explicitly trigger a redraw within a lifecycle method, you should
|
|||
|
||||
```javascript
|
||||
var StableComponent = {
|
||||
oncreate: function(vnode) {
|
||||
vnode.state.height = vnode.dom.offsetHeight
|
||||
m.redraw()
|
||||
},
|
||||
view: function() {
|
||||
return m("div", "This component is " + vnode.state.height + "px tall")
|
||||
}
|
||||
oncreate: function(vnode) {
|
||||
vnode.state.height = vnode.dom.offsetHeight
|
||||
m.redraw()
|
||||
},
|
||||
view: function() {
|
||||
return m("div", "This component is " + vnode.state.height + "px tall")
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
JSX is a syntax extension that enables you to write HTML tags interspersed with Javascript.
|
||||
|
||||
```
|
||||
```jsx
|
||||
var MyComponent = {
|
||||
view: function() {
|
||||
return m("main", [
|
||||
|
|
@ -35,7 +35,7 @@ var MyComponent = {
|
|||
|
||||
When using JSX, it's possible to interpolate Javascript expressions within JSX tags by using curly braces:
|
||||
|
||||
```
|
||||
```jsx
|
||||
var greeting = "Hello"
|
||||
var url = "http://google.com"
|
||||
var div = <a href={url}>{greeting + "!"}</a>
|
||||
|
|
@ -43,7 +43,7 @@ var div = <a href={url}>{greeting + "!"}</a>
|
|||
|
||||
Components can be used by using a convention of uppercasing the first letter of the component name:
|
||||
|
||||
```javascript
|
||||
```jsx
|
||||
m.mount(document.body, <MyComponent />)
|
||||
// equivalent to m.mount(document.body, m(MyComponent))
|
||||
```
|
||||
|
|
@ -190,7 +190,7 @@ Hyperscript is the compiled representation of JSX. It's designed to be readable
|
|||
|
||||
In addition, since hyperscript is plain Javascript, it's often more natural to indent than JSX:
|
||||
|
||||
```
|
||||
```jsx
|
||||
//JSX
|
||||
var BigComponent = {
|
||||
activate: function() {/*...*/},
|
||||
|
|
|
|||
|
|
@ -122,6 +122,9 @@ function initMocks() {
|
|||
"GET /api/v1/users/foo:bar": function(request) {
|
||||
return {status: 200, responseText: JSON.stringify({id: 123})}
|
||||
},
|
||||
"GET /files/image.svg": function(request) {
|
||||
return {status: 200, responseText: "<svg></svg>"}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue