Skip to content

Tutorial

Jump to bottom
Nathan Ridley edited this page Aug 6, 2016 · 1 revision

Motorcycle Collections are a great way not only to manage dynamic lists of a components in an application, but to manage your application's graph of child components in general.

All of the examples in this tutorial assume the same basic setup, which uses the simple HTML code below. It is up to you to use Webpack, Browserify or some other solution to bundle your code into the referenced main.js script referenced in the HTML header. DOM functions such as div and header are part of the HyperScript Helpers library re-exported as part of the Motorcycle DOM library. The first tutorial below shows standard imports and the basic application setup that we'll use, but, for brevity, these will be omitted in subsequent code samples.

HTML Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Motorcycle Collections Tutorial</title>
  <script src="main.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Tutorial and Guide

  • [Managing child components](Managing child components)
  • [Replacing a child component when state changes](Replacing a child component when state changes)
  • [Combining multiple sinks from child components](Combining multiple sinks from child components)
  • [Simple merging of a common sink to a derivative stream](Simple merging of a common sink to a derivative stream)
  • [Dynamic lists of child components](Dynamic lists of child components)
  • [Managing lists of components that don't have a key](Managing lists of components that don't have a key)
  • [Handling multiple component types in a single list](Handling multiple component types in a single list)
  • [Taking control of a component's lifecycle within a list](Taking control of a component's lifecycle within a list)

API Reference

  • [Quick Reference](API Quick Reference)
  • [Detailed Reference](API Detailed Reference)
Clone this wiki locally