Commit c01dae98743153d400531ac256fb74b5ca35138e
add when transform
Matt McKegg committed on 7/8/2016, 3:46:32 AMParent: c2921b35648957f8ee09a7df19d9df07911c9160
Files changed
README.md | changed |
test/dom.js | changed |
when.js | added |
README.md | ||
---|---|---|
@@ -15,18 +15,22 @@ | ||
15 | 15 … | |
16 | 16 … | ## Use |
17 | 17 … | |
18 | 18 … | ```js |
19 … | +var h = require('@mmckegg/mutant/html-element') | |
19 | 20 … | var Struct = require('@mmckegg/mutant/struct') |
20 | 21 … | var send = require('@mmckegg/mutant/send') |
21 | -var h = require('@mmckegg/mutant/html-element') | |
22 … | +var computed = require('@mmckegg/mutant/computed') | |
23 … | +var when = require('@mmckegg/mutant/when') | |
22 | 24 … | |
23 | 25 … | var state = Struct({ |
24 | 26 … | text: 'Test', |
25 | 27 … | color: 'red', |
26 | 28 … | value: 0 |
27 | 29 … | }) |
28 | 30 … | |
31 … | +var isBlue = computed([state.color], color => color === 'blue') | |
32 … | + | |
29 | 33 … | var element = h('div.cool', { |
30 | 34 … | classList: ['cool', state.text], |
31 | 35 … | style: { |
32 | 36 … | 'background-color': state.color |
@@ -35,11 +39,17 @@ | ||
35 | 39 … | h('div', [ |
36 | 40 … | state.text, ' ', state.value, ' ', h('strong', 'test') |
37 | 41 … | ]), |
38 | 42 … | h('div', [ |
39 | - h('button', { | |
40 | - 'ev-click': send(state.color.set, 'blue') | |
41 | - }, 'Change color') | |
43 … | + when(isBlue, | |
44 … | + h('button', { | |
45 … | + 'ev-click': send(state.color.set, 'red') | |
46 … | + }, 'Change color to red'), | |
47 … | + h('button', { | |
48 … | + 'ev-click': send(state.color.set, 'blue') | |
49 … | + }, 'Change color to blue') | |
50 … | + ) | |
51 … | + | |
42 | 52 … | ]) |
43 | 53 … | ]) |
44 | 54 … | |
45 | 55 … | setTimeout(function () { |
test/dom.js | ||
---|---|---|
@@ -1,14 +1,18 @@ | ||
1 | 1 … | var Struct = require('../struct') |
2 | 2 … | var send = require('../send') |
3 | 3 … | var h = require('../html-element') |
4 … | +var computed = require('../computed') | |
5 … | +var when = require('../when') | |
4 | 6 … | |
5 | 7 … | var state = Struct({ |
6 | 8 … | text: 'Test', |
7 | 9 … | color: 'red', |
8 | 10 … | value: 0 |
9 | 11 … | }) |
10 | 12 … | |
13 … | +var isBlue = computed([state.color], color => color === 'blue') | |
14 … | + | |
11 | 15 … | var element = h('div.cool', { |
12 | 16 … | classList: ['cool', state.text], |
13 | 17 … | style: { |
14 | 18 … | 'background-color': state.color |
@@ -17,11 +21,17 @@ | ||
17 | 21 … | h('div', [ |
18 | 22 … | state.text, ' ', state.value, ' ', h('strong', 'test') |
19 | 23 … | ]), |
20 | 24 … | h('div', [ |
21 | - h('button', { | |
22 | - 'ev-click': send(state.color.set, 'blue') | |
23 | - }, 'Change color') | |
25 … | + when(isBlue, | |
26 … | + h('button', { | |
27 … | + 'ev-click': send(state.color.set, 'red') | |
28 … | + }, 'Change color to red'), | |
29 … | + h('button', { | |
30 … | + 'ev-click': send(state.color.set, 'blue') | |
31 … | + }, 'Change color to blue') | |
32 … | + ) | |
33 … | + | |
24 | 34 … | ]) |
25 | 35 … | ]) |
26 | 36 … | |
27 | 37 … | setTimeout(function () { |
Built with git-ssb-web