< Previous | Next > | Table of Contents
In the 06 - Components lesson, we created the state management
code for an example with a conditions
component and two temperature components, air
and
water
.
In this section, we'll wire this up to lit-html.
Remember that we had an actions
object and a states
stream:
var actions = app.Actions(update);
states.map(function(state) {
document.write("<pre>" + JSON.stringify(state, null, 2) + "</pre>");
});
Now, we'll use lit-html's render
and a view function to render the view. We'll use map
on the states
stream, and render the view every time the state changes. We'll pass state
and actions
as parameters to the App
view function:
var element = document.getElementById("app");
states.map(state => render(App(state, actions), element));
The App
view function receives state
and actions
as parameters. We pass these on to other
view functions, in this case Conditions
and Temperature
. Notice that we have two instances
of Temperature
, and we also pass a different id
to each one.
var App = function(state, actions) {
return html`<div>
${Conditions({ state, id: "conditions", actions })}
${Temperature({ state, id: "temperature:air", actions })}
${Temperature({ state, id: "temperature:water", actions })}
<pre>${JSON.stringify(state, null, 4)}</pre>
</div>`;
};
The Conditions
view function displays a checkbox for "precipitations" and a series of radio
butons for the sky (Sunny, Cloudy, Mix of sun/clouds). The state
is used to reflect the
current state, and actions
are called to update the state when the user changes the
checkbox and radio buttons:
var skyOption = function({ state, id, actions, value, label }) {
return html`<label>
<input type="radio" id=${value} name="sky"
value=${value} .checked=${state[id].sky === value}
@change=${evt => actions.changeSky(id, evt.target.value)}/>
${label}
</label>`;
};
var Conditions = function({ state, id, actions }) {
return html`<div>
<label>
<input
type="checkbox"
.checked=${state[id].precipitations}
@change=${evt =>
actions.togglePrecipitations(id, evt.target.checked)
}/>
Precipitations
</label>
<div>
${skyOption({ state, id, actions, value: "SUNNY",
label: "Sunny"})}
${skyOption({ state, id, actions, value: "CLOUDY",
label: "Cloudy"})}
${skyOption({ state, id, actions, value: "MIX",
label: "Mix of sun/clouds"})}
</div>
</div>`;
};
The Temperature
view function is similar:
var Temperature = function({ state, id, actions }) {
return html`<div>
${state[id].label} Temperature:
${state[id].value} ° ${state[id].units}
<div>
<button
@click=${() => actions.increment(id, 1)}>
Increment
</button>
<button
@click=${() => actions.increment(id,-1)}>
Decrement
</button>
</div>
<div>
<button
@click=${() => actions.changeUnits(id)}>
Change Units
</button>
</div>
</div>`;
};
You can see the complete example below.
We can wire up Meiosis to lit-html using render
and passing state
and actions
as
parameters to the top-level App
view function. We call map
on the states
stream to
render the view whenever the state changes.
Then, all view functions in the application are consistent: they all receive state
and actions
parameters. When calling other view functions, state
and actions
are passed
along. When a view function is used multiple times, or when you want to define the state
property outside of the view function, you also pass the id
.
View functions can then use the state
to render the view according to the current application
state, and call actions
to trigger changes.
This concludes the Meiosis tutorial. See 11 - What's Next? for ideas on where to go from here.
< Previous | Next > | Table of Contents
Meiosis is developed by @foxdonut00 / foxdonut and is released under the MIT license.