153 lines
No EOL
8.1 KiB
HTML
153 lines
No EOL
8.1 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Mithril</title>
|
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
|
<link href="lib/prism/prism.css" rel="stylesheet" />
|
|
<link href="style.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="container">
|
|
<a href="index.html" class="logo"><span>○</span> Mithril</a>
|
|
<a href="getting-started.html">Guide</a>
|
|
<a href="mithril.html">API</a>
|
|
<a href="mithril.min.zip">Download</a>
|
|
<a href="http://github.com/lhorie/mithril.js" target="_blank">Github</a>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<section class="content">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col(3,3,12)">
|
|
<h2 id="api">API (v0.1)</h2>
|
|
<h3 id="core">Core</h3>
|
|
<ul>
|
|
<li><a href="mithril.html">m</a></li>
|
|
<li><a href="mithril.prop.html">m.prop</a></li>
|
|
<li><a href="mithril.withAttr.html">m.withAttr</a></li>
|
|
<li><a href="mithril.module.html">m.module</a></li>
|
|
<li><a href="mithril.trust.html">m.trust</a></li>
|
|
<li><a href="mithril.render.html">m.render</a></li>
|
|
<li><a href="mithril.redraw.html">m.redraw</a></li>
|
|
</ul>
|
|
<h3 id="routing">Routing</h3>
|
|
<ul>
|
|
<li><a href="mithril.route.html">m.route</a>
|
|
<ul>
|
|
<li><a href="mithril.route.html#defining-routes">m.route(rootElement, defaultRoute, routes)</a></li>
|
|
<li><a href="mithril.route.html#redirecting">m.route(path)</a></li>
|
|
<li><a href="mithril.route.html#mode-abstraction">m.route(element)</a></li>
|
|
<li><a href="mithril.route.html#mode">m.route.mode</a></li>
|
|
<li><a href="mithril.route.html#param">m.route.param</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<h3 id="data">Data</h3>
|
|
<ul>
|
|
<li><a href="mithril.request.html">m.request</a></li>
|
|
<li><a href="mithril.deferred.html">m.deferred</a></li>
|
|
<li><a href="mithril.sync.html">m.sync</a></li>
|
|
<li><a href="mithril.computation.html">m.startComputation / m.endComputation</a></li>
|
|
</ul>
|
|
|
|
<h2 id="archive">History</h2>
|
|
<ul>
|
|
<li><a href="roadmap.html">Roadmap</a></li>
|
|
<li><a href="change-log.html">Change log</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col(9,9,12)">
|
|
<h2 id="how-to-read-signatures">How to Read Signatures</h2>
|
|
<p>Rather than providing concrete classes like other frameworks, Mithril provides methods that operate on plain old javascript objects (POJOs) that match given signatures.</p>
|
|
<p>A signature is a description of its static type. For functions, it shows what are the parameters of the function, its return value and their expected types. For objects and arrays, it shows the expected data structure and the expected types of their members.</p>
|
|
<p>Method signatures in this documentation follow a syntax similar to Java syntax, with some extra additions:</p>
|
|
<pre><code class="lang-clike">ReturnType methodName(ParameterType1 param1, ParameterType2 param2)</code></pre>
|
|
<h3 id="optional-parameters">Optional Parameters</h3>
|
|
<p>Square brackets denote optional parameters. In the example below, <code>param2</code> and <code>param3</code> can both be omitted, but passing a value to <code>param2</code> is required if also passing a value to <code>param3</code>:</p>
|
|
<pre><code class="lang-clike">String test(String arg1 [, String arg2 [, String arg3]])</code></pre>
|
|
<pre><code class="lang-javascript">//examples of valid function calls
|
|
test("first");
|
|
test("first", "second");
|
|
test("first", "second", "third");</code></pre>
|
|
<h3 id="type-placeholders">Type Placeholders</h3>
|
|
<p>The word <code>void</code> is used as a type when a function does not return a value (i.e. undefined):</p>
|
|
<pre><code class="lang-clike">void test()</code></pre>
|
|
<pre><code class="lang-javascript">console.log(test()); // undefined</code></pre>
|
|
<p>The word <code>any</code> is used as a type if there are no type restrictions on a parameter:</p>
|
|
<pre><code class="lang-clike">void test(any value)</code></pre>
|
|
<pre><code class="lang-javascript">//examples of valid function calls
|
|
test("hello");
|
|
test(1);
|
|
test(["hello", "world"]);</code></pre>
|
|
<h3 id="arrays">Arrays</h3>
|
|
<p>Arrays use Generics syntax to denote the expected type of array members:</p>
|
|
<pre><code class="lang-clike">void test(Array<String> values)</code></pre>
|
|
<pre><code class="lang-javascript">//example of a valid function call
|
|
test(["first", "second"]);</code></pre>
|
|
<h3 id="objects-as-key-value-maps">Objects as Key-Value Maps</h3>
|
|
<p>Objects also use Generics syntax when they are meant to be used as a key-value map. Keys are always strings and, in key-value maps, can have any name.</p>
|
|
<pre><code class="lang-clike">void test(Object<Number> values)</code></pre>
|
|
<pre><code class="lang-javascript">//example of a valid function call
|
|
test({first: 1, second: 2});</code></pre>
|
|
<h3 id="objects-as-class-interfaces">Objects as Class Interfaces</h3>
|
|
<p>Objects that require specific keys are denoted using curly brace syntax:</p>
|
|
<pre><code class="lang-clike">void test(Object {String first, Number second} value)</code></pre>
|
|
<pre><code class="lang-javascript">//example of a valid function call
|
|
test({first: "first", second: 2});</code></pre>
|
|
<h3 id="type-aliasing">Type Aliasing</h3>
|
|
<p>Some types are aliases of more complex types. For example, in the example below, we created an alias called <code>ComplexType</code> for the type from the previous example</p>
|
|
<pre><code class="lang-clike">void test(ComplexType value)
|
|
|
|
where:
|
|
ComplexType :: Object {String first, Number second}
|
|
|
|
//example of a valid function call
|
|
test({first: "first", second: 2})</code></pre>
|
|
<h3 id="mixin-types">Mixin Types</h3>
|
|
<p>Curly brace syntax can also appear on other base types to denote that the value contains static members. For example, in the example below, a value of type <code>ComplexType</code> is a string, but it also has a boolean property called <code>flag</code>:</p>
|
|
<pre><code class="lang-clike">ComplexType :: String { Boolean flag }</code></pre>
|
|
<pre><code class="lang-javascript">//an example
|
|
var a = aComplexTypeValue
|
|
typeof a == "string" // true
|
|
"flag" in a // true
|
|
a.flag = true</code></pre>
|
|
<p>In the following example, a value of type <code>ComplexType</code> is a function, with a property called <code>label</code></p>
|
|
<pre><code class="lang-clike">ComplexType :: void test() { String label }</code></pre>
|
|
<pre><code class="lang-javascript">//an example
|
|
var a = aComplexTypeValue
|
|
typeof a == "function" // true
|
|
"label" in a // true
|
|
a.label = "first"</code></pre>
|
|
<h3 id="polimorphic-types">Polimorphic Types</h3>
|
|
<p>When multiple (but not all) types are accepted, the pipe <code>|</code> is used to delimit the list of valid types</p>
|
|
<pre><code class="lang-clike">void test(Children children, Value value)
|
|
|
|
where:
|
|
Children :: Array<String text | Number number>
|
|
Value :: String | Number</code></pre>
|
|
<pre><code class="lang-javascript">//examples of valid function calls
|
|
test(["test", 2], "second")
|
|
test([1, 2, 3], "second")
|
|
test([1, "test", 3], 2)</code></pre>
|
|
<p>Pipe syntax within Object curly brace syntax means that for a specific key name has specific type requirements.</p>
|
|
<p>In the example below, the <code>value</code> parameter should be a key-value map. This map may contain a key called <code>config</code>, whose value should be a function.</p>
|
|
<pre><code class="lang-clike">void test(Object { any | void config(DOMElement) } value)</code></pre>
|
|
<pre><code class="lang-javascript">//example of a valid function call
|
|
test({ first: "first", config: function(element) { /*do stuff*/ } })</code></pre>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer>
|
|
<div class="container">
|
|
Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>
|
|
<br />© 2014 Leo Horie
|
|
</div>
|
|
</footer>
|
|
<script src="lib/prism/prism.js"></script>
|
|
</body>
|
|
</html> |