fixing links
This commit is contained in:
Leo Horie
parent
2161e0ef25
commit
c736e738ce
211 changed files with 2776 additions and 1876 deletions
|
|
@ -91,7 +91,7 @@ where:
|
|||
<li><p><strong>GetterSetter { Promise then([any successCallback(any value) [, any errorCallback(any value)]]) } promise</strong></p>
|
||||
<p>A promise has a method called <code>then</code> which takes two computation callbacks as parameters.</p>
|
||||
<p>The <code>then</code> method returns another promise whose computations (if any) receive their inputs from the parent promise's computation.</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop.html"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<ul>
|
||||
<li><p><strong>Promise then([any successCallback(any value) [, any errorCallback(any value)]])</strong></p>
|
||||
<p>This method accepts two callbacks which process a value passed to the <code>resolve</code> and <code>reject</code> methods, respectively, and pass the processed value to the returned promise</p>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m">m</h2>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<p>You are encouraged to use CSS selectors to define virtual elements. See "Signature" section for details.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
m("div", "Hello"); //yields <div>Hello</div>
|
||||
|
||||
m("div", {class: "container"}, "Hello"); //yields <div class="container">Hello</div></code></pre>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<pre><code class="lang-javascript">m.render(document.body, m("br")); //puts a <br> in <body></code></pre>
|
||||
<p>You can also use more complex CSS selectors:</p>
|
||||
<pre><code class="lang-javascript">m(".container"); //yields <div class="container"></div>
|
||||
|
|
@ -165,7 +165,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -236,7 +236,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -256,12 +256,12 @@ m("a[href='/dashboard']", {config: m.route}, "Dashboard&q
|
|||
<p>Whether this is the first time we are running this function on this element. This flag is false the first time it runs on an element, and true on redraws that happen after the element has been created.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong> (optional)</p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the element being created.</p>
|
||||
</li>
|
||||
<li><p><strong>returns</strong> VirtualElement</p>
|
||||
<p>The returned VirtualElement is a javascript data structure that represents the DOM element to be rendered by <a href="mithril.render"><code>m.render</code></a></p>
|
||||
<p>The returned VirtualElement is a javascript data structure that represents the DOM element to be rendered by <a href="mithril.render.html"><code>m.render</code></a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ name("Mary"); //Mary
|
|||
|
||||
//read the value
|
||||
var b = name(); //b == "Mary"</code></pre>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr.html"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<pre><code class="lang-javascript">//a contrived example of bi-directional data binding
|
||||
var user = {
|
||||
model: function(name) {
|
||||
|
|
@ -90,7 +90,7 @@ var user = {
|
|||
}
|
||||
};</code></pre>
|
||||
<p>In the example above, the usage of <code>m.prop</code> allows the developer to change the implementation of the user name getter/setter without the need for code changes in the controller and view.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request.html"><code>m.request</code></a> and <a href="mithril.deferred.html"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<pre><code class="lang-javascript">var users = m.prop([]);
|
||||
var error = m.prop("");
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-redraw">m.redraw</h2>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module.html"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>This method is called internally by Mithril's auto-redrawing system and is only documented for completeness; you should avoid calling it manually unless you explicitly want a multi-pass redraw cycle.</p>
|
||||
<p>A multi-pass redraw cycle is usually only useful if you need non-trivial UI metrics measurements. A multi-pass cycle may span multiple browser repaints and therefore could cause flash of unbehaviored content (FOUC) and performance degradation.</p>
|
||||
<p>By default, if you're using either <a href="mithril.route.html"><code>m.route</code></a> or <a href="mithril.module.html"><code>m.module</code></a>, <code>m.redraw()</code> is called automatically by Mithril's auto-redrawing system once the controller finishes executing.</p>
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ where:
|
|||
<p>A DOM element which will contain the template represented by <code>children</code>.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the <code>root</code> element.</p>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -201,7 +201,7 @@ m("a[href='/dashboard/alicesmith']", {config: m.route});</code
|
|||
<p>an anchor element <code><a></code> with an <code>href</code> attribute that points to a route</p>
|
||||
</li>
|
||||
<li><p><strong>Boolean isInitialized</strong></p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril"><code>m()</code></a>)</p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril.html"><code>m()</code></a>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-sync">m.sync</h2>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred.html"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<pre><code class="lang-javascript">var greetAsync = function(delay) {
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
<div class="col(9,9,12)">
|
||||
<h2 id="m-withattr">m.withAttr</h2>
|
||||
<p>This is an event handler factory. It returns a method that can be bound to a DOM element's event listener.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop.html"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>This method is provided to decouple the browser's event model from the controller/logic model.</p>
|
||||
<p>You should use this method and implement similar ones when extracting values from a browser's Event object, instead of hard-coding the extraction code into controllers (or model methods).</p>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -1,76 +0,0 @@
|
|||
<!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.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)">
|
||||
|
||||
</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>
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<p>This is in stark contrast to the ActiveRecord pattern of other frameworks, where model entities are largely object representations of database entities and these entities are manipulated in controllers in an ad-hoc field-by-field fashion, and the "committed" via a <code>save</code> method.</p>
|
||||
<p>Because Mithril encourages all entity logic to be done in the model layer, it's idiomatic to create modules with model-level classes that deal specifically with relationship between entities, when there isn't already a model entity that can logically hold the relational business logic.</p>
|
||||
<p>Models are also responsible for centralizing tasks such as filtering of entity lists and validation routines, so that access to these methods is available across the application.</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates w/ Mithril's auto-redrawing system (see. <a href="mithril.computation"><code>m.startComputation</code> / <code>m.endComputation</code></a>)</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril.html"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw.html"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates w/ Mithril's auto-redrawing system (see. <a href="mithril.computation.html"><code>m.startComputation</code> / <code>m.endComputation</code></a>)</p>
|
||||
<hr>
|
||||
<h2 id="file-separation">File Separation</h2>
|
||||
<p>The examples in this site usually conflate different MVC layers together for the sake of readability, but normally it's recommended that each layer on a module be in different files. For example:</p>
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ where:
|
|||
<li><p><strong>GetterSetter { Promise then([any successCallback(any value) [, any errorCallback(any value)]]) } promise</strong></p>
|
||||
<p>A promise has a method called <code>then</code> which takes two computation callbacks as parameters.</p>
|
||||
<p>The <code>then</code> method returns another promise whose computations (if any) receive their inputs from the parent promise's computation.</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop.html"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<ul>
|
||||
<li><p><strong>Promise then([any successCallback(any value) [, any errorCallback(any value)]])</strong></p>
|
||||
<p>This method accepts two callbacks which process a value passed to the <code>resolve</code> and <code>reject</code> methods, respectively, and pass the processed value to the returned promise</p>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m">m</h2>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<p>You are encouraged to use CSS selectors to define virtual elements. See "Signature" section for details.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
m("div", "Hello"); //yields <div>Hello</div>
|
||||
|
||||
m("div", {class: "container"}, "Hello"); //yields <div class="container">Hello</div></code></pre>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<pre><code class="lang-javascript">m.render(document.body, m("br")); //puts a <br> in <body></code></pre>
|
||||
<p>You can also use more complex CSS selectors:</p>
|
||||
<pre><code class="lang-javascript">m(".container"); //yields <div class="container"></div>
|
||||
|
|
@ -166,7 +166,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -244,7 +244,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -264,13 +264,13 @@ m("a[href='/dashboard']", {config: m.route}, "Dashboard&q
|
|||
<p>Whether this is the first time we are running this function on this element. This flag is false the first time it runs on an element, and true on redraws that happen after the element has been created.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong> (optional)</p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the element being created.</p>
|
||||
<p>If it's a SubtreeDirective with the value "retain", it will retain the existing DOM tree in place, if any. See <a href="mithril.render#subtree-directives">subtree directives</a> for more information.</p>
|
||||
</li>
|
||||
<li><p><strong>returns</strong> VirtualElement</p>
|
||||
<p>The returned VirtualElement is a javascript data structure that represents the DOM element to be rendered by <a href="mithril.render"><code>m.render</code></a></p>
|
||||
<p>The returned VirtualElement is a javascript data structure that represents the DOM element to be rendered by <a href="mithril.render.html"><code>m.render</code></a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ name("Mary"); //Mary
|
|||
|
||||
//read the value
|
||||
var b = name(); //b == "Mary"</code></pre>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr.html"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<pre><code class="lang-javascript">//a contrived example of bi-directional data binding
|
||||
var user = {
|
||||
model: function(name) {
|
||||
|
|
@ -91,7 +91,7 @@ var user = {
|
|||
}
|
||||
};</code></pre>
|
||||
<p>In the example above, the usage of <code>m.prop</code> allows the developer to change the implementation of the user name getter/setter without the need for code changes in the controller and view.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred.html"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<pre><code class="lang-javascript">var users = m.prop([]);
|
||||
var error = m.prop("");
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-redraw">m.redraw</h2>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module.html"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>This method is called internally by Mithril's auto-redrawing system and is only documented for completeness; you should avoid calling it manually unless you explicitly want a multi-pass redraw cycle.</p>
|
||||
<p>A multi-pass redraw cycle is usually only useful if you need non-trivial UI metrics measurements. A multi-pass cycle may span multiple browser repaints and therefore could cause flash of unbehaviored content (FOUC) and performance degradation.</p>
|
||||
<p>By default, if you're using either <a href="mithril.route.html"><code>m.route</code></a> or <a href="mithril.module.html"><code>m.module</code></a>, <code>m.redraw()</code> is called automatically by Mithril's auto-redrawing system once the controller finishes executing.</p>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ where:
|
|||
<p>A DOM element which will contain the template represented by <code>children</code>.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the <code>root</code> element.</p>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ m("a[href='/dashboard/alicesmith']", {config: m.route});</code
|
|||
<p>an anchor element <code><a></code> with an <code>href</code> attribute that points to a route</p>
|
||||
</li>
|
||||
<li><p><strong>Boolean isInitialized</strong></p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril"><code>m()</code></a>)</p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril.html"><code>m()</code></a>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-sync">m.sync</h2>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred.html"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<pre><code class="lang-javascript">var greetAsync = function(delay) {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
<div class="col(9,9,12)">
|
||||
<h2 id="m-withattr">m.withAttr</h2>
|
||||
<p>This is an event handler factory. It returns a method that can be bound to a DOM element's event listener.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop.html"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>This method is provided to decouple the browser's event model from the controller/logic model.</p>
|
||||
<p>You should use this method and implement similar ones when extracting values from a browser's Event object, instead of hard-coding the extraction code into controllers (or model methods).</p>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
<!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="community.html">Community</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.10)</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)">
|
||||
|
||||
</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>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<p>This is in stark contrast to the ActiveRecord pattern of other frameworks, where model entities are largely object representations of database entities and these entities are manipulated in controllers in an ad-hoc field-by-field fashion, and the "committed" via a <code>save</code> method.</p>
|
||||
<p>Because Mithril encourages all entity logic to be done in the model layer, it's idiomatic to create modules with model-level classes that deal specifically with relationship between entities, when there isn't already a model entity that can logically hold the relational business logic.</p>
|
||||
<p>Models are also responsible for centralizing tasks such as filtering of entity lists and validation routines, so that access to these methods is available across the application.</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates w/ Mithril's auto-redrawing system (see. <a href="mithril.computation"><code>m.startComputation</code> / <code>m.endComputation</code></a>)</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril.html"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw.html"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates w/ Mithril's auto-redrawing system (see. <a href="mithril.computation.html"><code>m.startComputation</code> / <code>m.endComputation</code></a>)</p>
|
||||
<hr>
|
||||
<h2 id="file-separation">File Separation</h2>
|
||||
<p>The examples in this site usually conflate different MVC layers together for the sake of readability, but normally it's recommended that each layer on a module be in different files. For example:</p>
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ where:
|
|||
<li><p><strong>GetterSetter { Promise then([any successCallback(any value) [, any errorCallback(any value)]]) } promise</strong></p>
|
||||
<p>A promise has a method called <code>then</code> which takes two computation callbacks as parameters.</p>
|
||||
<p>The <code>then</code> method returns another promise whose computations (if any) receive their inputs from the parent promise's computation.</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop.html"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<ul>
|
||||
<li><p><strong>Promise then([any successCallback(any value) [, any errorCallback(any value)]])</strong></p>
|
||||
<p>This method accepts two callbacks which process a value passed to the <code>resolve</code> and <code>reject</code> methods, respectively, and pass the processed value to the returned promise</p>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m">m</h2>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<p>You are encouraged to use CSS selectors to define virtual elements. See "Signature" section for details.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
m("div", "Hello"); //yields <div>Hello</div>
|
||||
|
||||
m("div", {class: "container"}, "Hello"); //yields <div class="container">Hello</div></code></pre>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<pre><code class="lang-javascript">m.render(document.body, m("br")); //puts a <br> in <body></code></pre>
|
||||
<p>You can also use more complex CSS selectors:</p>
|
||||
<pre><code class="lang-javascript">m(".container"); //yields <div class="container"></div>
|
||||
|
|
@ -169,7 +169,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -247,7 +247,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -267,13 +267,13 @@ m("a[href='/dashboard']", {config: m.route}, "Dashboard&q
|
|||
<p>Whether this is the first time we are running this function on this element. This flag is false the first time it runs on an element, and true on redraws that happen after the element has been created.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong> (optional)</p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the element being created.</p>
|
||||
<p>If it's a SubtreeDirective with the value "retain", it will retain the existing DOM tree in place, if any. See <a href="mithril.render#subtree-directives">subtree directives</a> for more information.</p>
|
||||
</li>
|
||||
<li><p><strong>returns</strong> VirtualElement</p>
|
||||
<p>The returned VirtualElement is a javascript data structure that represents the DOM element to be rendered by <a href="mithril.render"><code>m.render</code></a></p>
|
||||
<p>The returned VirtualElement is a javascript data structure that represents the DOM element to be rendered by <a href="mithril.render.html"><code>m.render</code></a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ name("Mary"); //Mary
|
|||
|
||||
//read the value
|
||||
var b = name(); //b == "Mary"</code></pre>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr.html"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<pre><code class="lang-javascript">//a contrived example of bi-directional data binding
|
||||
var user = {
|
||||
model: function(name) {
|
||||
|
|
@ -92,7 +92,7 @@ var user = {
|
|||
}
|
||||
};</code></pre>
|
||||
<p>In the example above, the usage of <code>m.prop</code> allows the developer to change the implementation of the user name getter/setter without the need for code changes in the controller and view.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred.html"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<pre><code class="lang-javascript">var users = m.prop([]);
|
||||
var error = m.prop("");
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-redraw">m.redraw</h2>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module.html"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>This method is called internally by Mithril's auto-redrawing system and is only documented for completeness; usually you should avoid calling it manually unless you explicitly want a multi-pass redraw cycle. One case where <code>m.redraw</code> may be useful is to force a manual redraw after background requests (see the <code>background</code> option in <a href="mithril.request.html"><code>m.request</code></a>.</p>
|
||||
<p>A multi-pass redraw cycle is usually only useful if you need non-trivial UI metrics measurements. A multi-pass cycle may span multiple browser repaints and therefore could cause flash of unbehaviored content (FOUC) and performance degradation.</p>
|
||||
<p>By default, if you're using either <a href="mithril.route.html"><code>m.route</code></a> or <a href="mithril.module.html"><code>m.module</code></a>, <code>m.redraw()</code> is called automatically by Mithril's auto-redrawing system once the controller finishes executing.</p>
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ where:
|
|||
<p>A DOM element which will contain the template represented by <code>children</code>.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the <code>root</code> element.</p>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -224,7 +224,7 @@ m("a[href='/dashboard/alicesmith']", {config: m.route});</code
|
|||
<p>an anchor element <code><a></code> with an <code>href</code> attribute that points to a route</p>
|
||||
</li>
|
||||
<li><p><strong>Boolean isInitialized</strong></p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril"><code>m()</code></a>)</p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril.html"><code>m()</code></a>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-sync">m.sync</h2>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred.html"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<pre><code class="lang-javascript">var greetAsync = function(delay) {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
<div class="col(9,9,12)">
|
||||
<h2 id="m-withattr">m.withAttr</h2>
|
||||
<p>This is an event handler factory. It returns a method that can be bound to a DOM element's event listener.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop.html"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>This method is provided to decouple the browser's event model from the controller/logic model.</p>
|
||||
<p>You should use this method and implement similar ones when extracting values from a browser's Event object, instead of hard-coding the extraction code into controllers (or model methods).</p>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -1,78 +0,0 @@
|
|||
<!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="community.html">Community</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.11)</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#reading-current-route">m.route()</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)">
|
||||
|
||||
</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>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<p>This is in stark contrast to the ActiveRecord pattern of other frameworks, where model entities are largely object representations of database entities and these entities are manipulated in controllers in an ad-hoc field-by-field fashion, and the "committed" via a <code>save</code> method.</p>
|
||||
<p>Because Mithril encourages all entity logic to be done in the model layer, it's idiomatic to create modules with model-level classes that deal specifically with relationship between entities, when there isn't already a model entity that can logically hold the relational business logic.</p>
|
||||
<p>Models are also responsible for centralizing tasks such as filtering of entity lists and validation routines, so that access to these methods is available across the application.</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates w/ Mithril's auto-redrawing system (see. <a href="mithril.computation"><code>m.startComputation</code> / <code>m.endComputation</code></a>)</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril.html"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw.html"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates w/ Mithril's auto-redrawing system (see. <a href="mithril.computation.html"><code>m.startComputation</code> / <code>m.endComputation</code></a>)</p>
|
||||
<hr>
|
||||
<h2 id="file-separation">File Separation</h2>
|
||||
<p>The examples in this site usually conflate different MVC layers together for the sake of readability, but normally it's recommended that each layer on a module be in different files. For example:</p>
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@ where:
|
|||
<li><p><strong>GetterSetter { Promise then([any successCallback(any value) [, any errorCallback(any value)]]) } promise</strong></p>
|
||||
<p>A promise has a method called <code>then</code> which takes two computation callbacks as parameters.</p>
|
||||
<p>The <code>then</code> method returns another promise whose computations (if any) receive their inputs from the parent promise's computation.</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop.html"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<ul>
|
||||
<li><p><strong>Promise then([any successCallback(any value) [, any errorCallback(any value)]])</strong></p>
|
||||
<p>This method accepts two callbacks which process a value passed to the <code>resolve</code> and <code>reject</code> methods, respectively, and pass the processed value to the returned promise</p>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m">m</h2>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<p>You are encouraged to use CSS selectors to define virtual elements. See "Signature" section for details.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
m("div", "Hello"); //yields <div>Hello</div>
|
||||
|
||||
m("div", {class: "container"}, "Hello"); //yields <div class="container">Hello</div></code></pre>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<pre><code class="lang-javascript">m.render(document.body, m("br")); //puts a <br> in <body></code></pre>
|
||||
<p>You can also use more complex CSS selectors:</p>
|
||||
<pre><code class="lang-javascript">m(".container"); //yields <div class="container"></div>
|
||||
|
|
@ -169,7 +169,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -247,7 +247,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -267,13 +267,13 @@ m("a[href='/dashboard']", {config: m.route}, "Dashboard&q
|
|||
<p>Whether this is the first time we are running this function on this element. This flag is false the first time it runs on an element, and true on redraws that happen after the element has been created.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong> (optional)</p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the element being created.</p>
|
||||
<p>If it's a SubtreeDirective with the value "retain", it will retain the existing DOM tree in place, if any. See <a href="mithril.render#subtree-directives">subtree directives</a> for more information.</p>
|
||||
</li>
|
||||
<li><p><strong>returns</strong> VirtualElement</p>
|
||||
<p>The returned VirtualElement is a javascript data structure that represents the DOM element to be rendered by <a href="mithril.render"><code>m.render</code></a></p>
|
||||
<p>The returned VirtualElement is a javascript data structure that represents the DOM element to be rendered by <a href="mithril.render.html"><code>m.render</code></a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ name("Mary"); //Mary
|
|||
|
||||
//read the value
|
||||
var b = name(); //b == "Mary"</code></pre>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr.html"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<pre><code class="lang-javascript">//a contrived example of bi-directional data binding
|
||||
var user = {
|
||||
model: function(name) {
|
||||
|
|
@ -92,7 +92,7 @@ var user = {
|
|||
}
|
||||
};</code></pre>
|
||||
<p>In the example above, the usage of <code>m.prop</code> allows the developer to change the implementation of the user name getter/setter without the need for code changes in the controller and view.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred.html"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<pre><code class="lang-javascript">var users = m.prop([]);
|
||||
var error = m.prop("");
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-redraw">m.redraw</h2>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module.html"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>This method is called internally by Mithril's auto-redrawing system and is only documented for completeness; usually you should avoid calling it manually unless you explicitly want a multi-pass redraw cycle. One case where <code>m.redraw</code> may be useful is to force a manual redraw after background requests (see the <code>background</code> option in <a href="mithril.request.html"><code>m.request</code></a>.</p>
|
||||
<p>A multi-pass redraw cycle is usually only useful if you need non-trivial UI metrics measurements. A multi-pass cycle may span multiple browser repaints and therefore could cause flash of unbehaviored content (FOUC) and performance degradation.</p>
|
||||
<p>By default, if you're using either <a href="mithril.route.html"><code>m.route</code></a> or <a href="mithril.module.html"><code>m.module</code></a>, <code>m.redraw()</code> is called automatically by Mithril's auto-redrawing system once the controller finishes executing.</p>
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ where:
|
|||
<p>A DOM element which will contain the template represented by <code>children</code>.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the <code>root</code> element.</p>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -245,7 +245,7 @@ m("a[href='/dashboard/alicesmith']", {config: m.route});</code
|
|||
<p>an anchor element <code><a></code> with an <code>href</code> attribute that points to a route</p>
|
||||
</li>
|
||||
<li><p><strong>Boolean isInitialized</strong></p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril"><code>m()</code></a>)</p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril.html"><code>m()</code></a>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-sync">m.sync</h2>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred.html"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<pre><code class="lang-javascript">var greetAsync = function(delay) {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
<div class="col(9,9,12)">
|
||||
<h2 id="m-withattr">m.withAttr</h2>
|
||||
<p>This is an event handler factory. It returns a method that can be bound to a DOM element's event listener.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop.html"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>This method is provided to decouple the browser's event model from the controller/logic model.</p>
|
||||
<p>You should use this method and implement similar ones when extracting values from a browser's Event object, instead of hard-coding the extraction code into controllers (or model methods).</p>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -1,78 +0,0 @@
|
|||
<!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="community.html">Community</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.12)</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#reading-current-route">m.route()</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)">
|
||||
|
||||
</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>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<p>This is in stark contrast to the ActiveRecord pattern of other frameworks, where model entities are largely object representations of database entities and these entities are manipulated in controllers in an ad-hoc field-by-field fashion, and the "committed" via a <code>save</code> method.</p>
|
||||
<p>Because Mithril encourages all entity logic to be done in the model layer, it's idiomatic to create modules with model-level classes that deal specifically with relationship between entities, when there isn't already a model entity that can logically hold the relational business logic.</p>
|
||||
<p>Models are also responsible for centralizing tasks such as filtering of entity lists and validation routines, so that access to these methods is available across the application.</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates w/ Mithril's auto-redrawing system (see. <a href="mithril.computation"><code>m.startComputation</code> / <code>m.endComputation</code></a>)</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril.html"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw.html"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates w/ Mithril's auto-redrawing system (see. <a href="mithril.computation.html"><code>m.startComputation</code> / <code>m.endComputation</code></a>)</p>
|
||||
<hr>
|
||||
<h2 id="file-separation">File Separation</h2>
|
||||
<p>The examples in this site usually conflate different MVC layers together for the sake of readability, but normally it's recommended that each layer on a module be in different files. For example:</p>
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@ where:
|
|||
<li><p><strong>GetterSetter { Promise then([any successCallback(any value) [, any errorCallback(any value)]]) } promise</strong></p>
|
||||
<p>A promise has a method called <code>then</code> which takes two computation callbacks as parameters.</p>
|
||||
<p>The <code>then</code> method returns another promise whose computations (if any) receive their inputs from the parent promise's computation.</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop.html"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<ul>
|
||||
<li><p><strong>Promise then([any successCallback(any value) [, any errorCallback(any value)]])</strong></p>
|
||||
<p>This method accepts two callbacks which process a value passed to the <code>resolve</code> and <code>reject</code> methods, respectively, and pass the processed value to the returned promise</p>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m">m</h2>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<p>You are encouraged to use CSS selectors to define virtual elements. See "Signature" section for details.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
m("div", "Hello"); //yields <div>Hello</div>
|
||||
|
||||
m("div", {class: "container"}, "Hello"); //yields <div class="container">Hello</div></code></pre>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<pre><code class="lang-javascript">m.render(document.body, m("br")); //puts a <br> in <body></code></pre>
|
||||
<p>You can also use more complex CSS selectors:</p>
|
||||
<pre><code class="lang-javascript">m(".container"); //yields <div class="container"></div>
|
||||
|
|
@ -174,7 +174,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -252,7 +252,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -272,13 +272,13 @@ m("a[href='/dashboard']", {config: m.route}, "Dashboard&q
|
|||
<p>Whether this is the first time we are running this function on this element. This flag is false the first time it runs on an element, and true on redraws that happen after the element has been created.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong> (optional)</p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the element being created.</p>
|
||||
<p>If it's a SubtreeDirective with the value "retain", it will retain the existing DOM tree in place, if any. See <a href="mithril.render#subtree-directives">subtree directives</a> for more information.</p>
|
||||
</li>
|
||||
<li><p><strong>returns</strong> VirtualElement</p>
|
||||
<p>The returned VirtualElement is a javascript data structure that represents the DOM element to be rendered by <a href="mithril.render"><code>m.render</code></a></p>
|
||||
<p>The returned VirtualElement is a javascript data structure that represents the DOM element to be rendered by <a href="mithril.render.html"><code>m.render</code></a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ name("Mary"); //Mary
|
|||
|
||||
//read the value
|
||||
var b = name(); //b == "Mary"</code></pre>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr.html"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<pre><code class="lang-javascript">//a contrived example of bi-directional data binding
|
||||
var user = {
|
||||
model: function(name) {
|
||||
|
|
@ -91,7 +91,7 @@ var user = {
|
|||
}
|
||||
};</code></pre>
|
||||
<p>In the example above, the usage of <code>m.prop</code> allows the developer to change the implementation of the user name getter/setter without the need for code changes in the controller and view.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred.html"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<pre><code class="lang-javascript">var users = m.prop([]);
|
||||
var error = m.prop("");
|
||||
|
||||
|
|
|
|||
|
|
@ -61,11 +61,11 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-redraw">m.redraw</h2>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module.html"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>This method is called internally by Mithril's auto-redrawing system. Usually you don't need to call it manually unless you are doing recurring asynchronous operations (i.e. using <code>setInterval</code>) or if you want to decouple slow running background requests from the rendering context (see the <code>background</code> option in <a href="mithril.request.html"><code>m.request</code></a>.</p>
|
||||
<p>By default, if you're using either <a href="mithril.route.html"><code>m.route</code></a> or <a href="mithril.module.html"><code>m.module</code></a>, <code>m.redraw()</code> is called automatically by Mithril's auto-redrawing system once the controller finishes executing.</p>
|
||||
<p><code>m.redraw</code> is also called automatically on event handlers defined in virtual elements.</p>
|
||||
<p>Note that calling this method will not do anything if a module was not activated via either <a href="mithril.module"><code>m.module()</code></a> or <a href="mithril.route"><code>m.route()</code></a>. This means that <code>m.redraw</code> doesn't do anything when instantiating controllers and rendering views via <code>m.render</code> manually.</p>
|
||||
<p>Note that calling this method will not do anything if a module was not activated via either <a href="mithril.module.html"><code>m.module()</code></a> or <a href="mithril.route.html"><code>m.route()</code></a>. This means that <code>m.redraw</code> doesn't do anything when instantiating controllers and rendering views via <code>m.render</code> manually.</p>
|
||||
<p>If there are pending <a href="mithril.request.html"><code>m.request</code></a> calls in either a controller constructor or event handler, the auto-redrawing system waits for all the AJAX requests to complete before calling <code>m.redraw</code>.</p>
|
||||
<p>This method may also be called manually from within a controller if more granular updates to the view are needed, however doing so is generally not recommended, as it may degrade performance. Model classes should never call this method. </p>
|
||||
<p>If you are developing an asynchronous model-level service and finding that Mithril is not redrawing the view after your code runs, you should use <a href="mithril.computation.html"><code>m.startComputation</code> and <code>m.endComputation</code></a> to integrate with Mithril's auto-redrawing system instead.</p>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ where:
|
|||
<p>A DOM element which will contain the template represented by <code>children</code>.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the <code>root</code> element.</p>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -266,7 +266,7 @@ m("a[href='/dashboard/alicesmith']", {config: m.route});</code
|
|||
<p>an anchor element <code><a></code> with an <code>href</code> attribute that points to a route</p>
|
||||
</li>
|
||||
<li><p><strong>Boolean isInitialized</strong></p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril"><code>m()</code></a>)</p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril.html"><code>m()</code></a>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-sync">m.sync</h2>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred.html"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<pre><code class="lang-javascript">var greetAsync = function(delay) {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
<div class="col(9,9,12)">
|
||||
<h2 id="m-withattr">m.withAttr</h2>
|
||||
<p>This is an event handler factory. It returns a method that can be bound to a DOM element's event listener.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop.html"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>This method is provided to decouple the browser's event model from the controller/logic model.</p>
|
||||
<p>You should use this method and implement similar ones when extracting values from a browser's Event object, instead of hard-coding the extraction code into controllers (or model methods).</p>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<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="community.html">Community</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.13)</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#reading-current-route">m.route()</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)">
|
||||
|
||||
</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>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<p>This is in stark contrast to the ActiveRecord pattern of other frameworks, where model entities are largely object representations of database entities and these entities are manipulated in controllers in an ad-hoc field-by-field fashion, and the "committed" via a <code>save</code> method.</p>
|
||||
<p>Because Mithril encourages all entity logic to be done in the model layer, it's idiomatic to create modules with model-level classes that deal specifically with relationship between entities, when there isn't already a model entity that can logically hold the relational business logic.</p>
|
||||
<p>Models are also responsible for centralizing tasks such as filtering of entity lists and validation routines, so that access to these methods is available across the application.</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates w/ Mithril's auto-redrawing system (see. <a href="mithril.computation"><code>m.startComputation</code> / <code>m.endComputation</code></a>)</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril.html"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw.html"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates w/ Mithril's auto-redrawing system (see. <a href="mithril.computation.html"><code>m.startComputation</code> / <code>m.endComputation</code></a>)</p>
|
||||
<hr>
|
||||
<h2 id="file-separation">File Separation</h2>
|
||||
<p>The examples in this site usually conflate different MVC layers together for the sake of readability, but normally it's recommended that each layer on a module be in different files. For example:</p>
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ where:
|
|||
<li><p><strong>GetterSetter { Promise then([any successCallback(any value) [, any errorCallback(any value)]]) } promise</strong></p>
|
||||
<p>A promise has a method called <code>then</code> which takes two computation callbacks as parameters.</p>
|
||||
<p>The <code>then</code> method returns another promise whose computations (if any) receive their inputs from the parent promise's computation.</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop.html"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<ul>
|
||||
<li><p><strong>Promise then([any successCallback(any value) [, any errorCallback(any value)]])</strong></p>
|
||||
<p>This method accepts two callbacks which process a value passed to the <code>resolve</code> and <code>reject</code> methods, respectively, and pass the processed value to the returned promise</p>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m">m</h2>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<p>You are encouraged to use CSS selectors to define virtual elements. See "Signature" section for details.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
m("div", "Hello"); //yields <div>Hello</div>
|
||||
|
||||
m("div", {class: "container"}, "Hello"); //yields <div class="container">Hello</div></code></pre>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<pre><code class="lang-javascript">m.render(document.body, m("br")); //puts a <br> in <body></code></pre>
|
||||
<p>You can also use more complex CSS selectors:</p>
|
||||
<pre><code class="lang-javascript">m(".container"); //yields <div class="container"></div>
|
||||
|
|
@ -174,7 +174,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -252,7 +252,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -272,13 +272,13 @@ m("a[href='/dashboard']", {config: m.route}, "Dashboard&q
|
|||
<p>Whether this is the first time we are running this function on this element. This flag is false the first time it runs on an element, and true on redraws that happen after the element has been created.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong> (optional)</p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the element being created.</p>
|
||||
<p>If it's a SubtreeDirective with the value "retain", it will retain the existing DOM tree in place, if any. See <a href="mithril.render#subtree-directives">subtree directives</a> for more information.</p>
|
||||
</li>
|
||||
<li><p><strong>returns</strong> VirtualElement</p>
|
||||
<p>The returned VirtualElement is a Javascript data structure that represents the DOM element to be rendered by <a href="mithril.render"><code>m.render</code></a></p>
|
||||
<p>The returned VirtualElement is a Javascript data structure that represents the DOM element to be rendered by <a href="mithril.render.html"><code>m.render</code></a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ name("Mary"); //Mary
|
|||
|
||||
//read the value
|
||||
var b = name(); //b == "Mary"</code></pre>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr.html"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<pre><code class="lang-javascript">//a contrived example of bi-directional data binding
|
||||
var user = {
|
||||
model: function(name) {
|
||||
|
|
@ -91,7 +91,7 @@ var user = {
|
|||
}
|
||||
};</code></pre>
|
||||
<p>In the example above, the usage of <code>m.prop</code> allows the developer to change the implementation of the user name getter/setter without the need for code changes in the controller and view.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred.html"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<pre><code class="lang-javascript">var users = m.prop([]);
|
||||
var error = m.prop("");
|
||||
|
||||
|
|
|
|||
|
|
@ -61,11 +61,11 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-redraw">m.redraw</h2>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module.html"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>This method is called internally by Mithril's auto-redrawing system. Usually you don't need to call it manually unless you are doing recurring asynchronous operations (i.e. using <code>setInterval</code>) or if you want to decouple slow running background requests from the rendering context (see the <code>background</code> option in <a href="mithril.request.html"><code>m.request</code></a>.</p>
|
||||
<p>By default, if you're using either <a href="mithril.route.html"><code>m.route</code></a> or <a href="mithril.module.html"><code>m.module</code></a>, <code>m.redraw()</code> is called automatically by Mithril's auto-redrawing system once the controller finishes executing.</p>
|
||||
<p><code>m.redraw</code> is also called automatically on event handlers defined in virtual elements.</p>
|
||||
<p>Note that calling this method will not do anything if a module was not activated via either <a href="mithril.module"><code>m.module()</code></a> or <a href="mithril.route"><code>m.route()</code></a>. This means that <code>m.redraw</code> doesn't do anything when instantiating controllers and rendering views via <code>m.render</code> manually.</p>
|
||||
<p>Note that calling this method will not do anything if a module was not activated via either <a href="mithril.module.html"><code>m.module()</code></a> or <a href="mithril.route.html"><code>m.route()</code></a>. This means that <code>m.redraw</code> doesn't do anything when instantiating controllers and rendering views via <code>m.render</code> manually.</p>
|
||||
<p>If there are pending <a href="mithril.request.html"><code>m.request</code></a> calls in either a controller constructor or event handler, the auto-redrawing system waits for all the AJAX requests to complete before calling <code>m.redraw</code>.</p>
|
||||
<p>This method may also be called manually from within a controller if more granular updates to the view are needed, however doing so is generally not recommended, as it may degrade performance. Model classes should never call this method. </p>
|
||||
<p>If you are developing an asynchronous model-level service and finding that Mithril is not redrawing the view after your code runs, you should use <a href="mithril.computation.html"><code>m.startComputation</code> and <code>m.endComputation</code></a> to integrate with Mithril's auto-redrawing system instead.</p>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ where:
|
|||
<p>A DOM element which will contain the template represented by <code>children</code>.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the <code>root</code> element.</p>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -280,7 +280,7 @@ m("a[href='/dashboard/alicesmith']", {config: m.route});</code
|
|||
<p>an anchor element <code><a></code> with an <code>href</code> attribute that points to a route</p>
|
||||
</li>
|
||||
<li><p><strong>Boolean isInitialized</strong></p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril"><code>m()</code></a>)</p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril.html"><code>m()</code></a>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-sync">m.sync</h2>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred.html"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<pre><code class="lang-javascript">var greetAsync = function(delay) {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
<div class="col(9,9,12)">
|
||||
<h2 id="m-withattr">m.withAttr</h2>
|
||||
<p>This is an event handler factory. It returns a method that can be bound to a DOM element's event listener.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop.html"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>This method is provided to decouple the browser's event model from the controller/logic model.</p>
|
||||
<p>You should use this method and implement similar ones when extracting values from a browser's Event object, instead of hard-coding the extraction code into controllers (or model methods).</p>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<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="community.html">Community</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.14)</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, params)</a></li>
|
||||
<li><a href="mithril.route.html#reading-current-route">m.route()</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)">
|
||||
|
||||
</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>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<p>This is in stark contrast to the ActiveRecord pattern of other frameworks, where model entities are largely object representations of database entities and these entities are manipulated in controllers in an ad-hoc field-by-field fashion, and then "committed" via a <code>save</code> method.</p>
|
||||
<p>Because Mithril encourages all entity logic to be done in the model layer, it's idiomatic to create modules with model-level classes that deal specifically with relationships between entities, when there isn't already a model entity that can logically hold the relational business logic.</p>
|
||||
<p>Models are also responsible for centralizing tasks such as filtering of entity lists and validation routines, so that access to these methods is available across the application.</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates with Mithril's auto-redrawing system (see <a href="mithril.computation"><code>m.startComputation</code> / <code>m.endComputation</code></a>).</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril.html"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw.html"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates with Mithril's auto-redrawing system (see <a href="mithril.computation.html"><code>m.startComputation</code> / <code>m.endComputation</code></a>).</p>
|
||||
<hr>
|
||||
<h2 id="file-separation">File Separation</h2>
|
||||
<p>The examples in this site usually conflate different MVC layers together for the sake of readability, but normally it's recommended that each layer on a module be in different files. For example:</p>
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ where:
|
|||
<li><p><strong>GetterSetter { Promise then([any successCallback(any value) [, any errorCallback(any value)]]) } promise</strong></p>
|
||||
<p>A promise has a method called <code>then</code> which takes two computation callbacks as parameters.</p>
|
||||
<p>The <code>then</code> method returns another promise whose computations (if any) receive their inputs from the parent promise's computation.</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop.html"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<ul>
|
||||
<li><p><strong>Promise then([any successCallback(any value) [, any errorCallback(any value)]])</strong></p>
|
||||
<p>This method accepts two callbacks which process a value passed to the <code>resolve</code> and <code>reject</code> methods, respectively, and pass the processed value to the returned promise</p>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m">m</h2>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<p>You are encouraged to use CSS selectors to define virtual elements. See "Signature" section for details.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
m("div", "Hello"); //yields <div>Hello</div>
|
||||
|
||||
m("div", {class: "container"}, "Hello"); //yields <div class="container">Hello</div></code></pre>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<pre><code class="lang-javascript">m.render(document.body, m("br")); //puts a <br> in <body></code></pre>
|
||||
<p>You can also use more complex CSS selectors:</p>
|
||||
<pre><code class="lang-javascript">m(".container"); //yields <div class="container"></div>
|
||||
|
|
@ -174,7 +174,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -252,7 +252,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -272,13 +272,13 @@ m("a[href='/dashboard']", {config: m.route}, "Dashboard&q
|
|||
<p>Whether this is the first time we are running this function on this element. This flag is false the first time it runs on an element, and true on redraws that happen after the element has been created.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong> (optional)</p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the element being created.</p>
|
||||
<p>If it's a SubtreeDirective with the value "retain", it will retain the existing DOM tree in place, if any. See <a href="mithril.render#subtree-directives">subtree directives</a> for more information.</p>
|
||||
</li>
|
||||
<li><p><strong>returns</strong> VirtualElement</p>
|
||||
<p>The returned VirtualElement is a Javascript data structure that represents the DOM element to be rendered by <a href="mithril.render"><code>m.render</code></a></p>
|
||||
<p>The returned VirtualElement is a Javascript data structure that represents the DOM element to be rendered by <a href="mithril.render.html"><code>m.render</code></a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ name("Mary"); //Mary
|
|||
|
||||
//read the value
|
||||
var b = name(); //b == "Mary"</code></pre>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr.html"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<pre><code class="lang-javascript">//a contrived example of bi-directional data binding
|
||||
var user = {
|
||||
model: function(name) {
|
||||
|
|
@ -91,7 +91,7 @@ var user = {
|
|||
}
|
||||
};</code></pre>
|
||||
<p>In the example above, the usage of <code>m.prop</code> allows the developer to change the implementation of the user name getter/setter without the need for code changes in the controller and view.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred.html"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<pre><code class="lang-javascript">var users = m.prop([]);
|
||||
var error = m.prop("");
|
||||
|
||||
|
|
|
|||
|
|
@ -61,11 +61,11 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-redraw">m.redraw</h2>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module.html"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>This method is called internally by Mithril's auto-redrawing system. Usually you don't need to call it manually unless you are doing recurring asynchronous operations (i.e. using <code>setInterval</code>) or if you want to decouple slow running background requests from the rendering context (see the <code>background</code> option in <a href="mithril.request.html"><code>m.request</code></a>.</p>
|
||||
<p>By default, if you're using either <a href="mithril.route.html"><code>m.route</code></a> or <a href="mithril.module.html"><code>m.module</code></a>, <code>m.redraw()</code> is called automatically by Mithril's auto-redrawing system once the controller finishes executing.</p>
|
||||
<p><code>m.redraw</code> is also called automatically on event handlers defined in virtual elements.</p>
|
||||
<p>Note that calling this method will not do anything if a module was not activated via either <a href="mithril.module"><code>m.module()</code></a> or <a href="mithril.route"><code>m.route()</code></a>. This means that <code>m.redraw</code> doesn't do anything when instantiating controllers and rendering views via <code>m.render</code> manually.</p>
|
||||
<p>Note that calling this method will not do anything if a module was not activated via either <a href="mithril.module.html"><code>m.module()</code></a> or <a href="mithril.route.html"><code>m.route()</code></a>. This means that <code>m.redraw</code> doesn't do anything when instantiating controllers and rendering views via <code>m.render</code> manually.</p>
|
||||
<p>If there are pending <a href="mithril.request.html"><code>m.request</code></a> calls in either a controller constructor or event handler, the auto-redrawing system waits for all the AJAX requests to complete before calling <code>m.redraw</code>.</p>
|
||||
<p>This method may also be called manually from within a controller if more granular updates to the view are needed, however doing so is generally not recommended, as it may degrade performance. Model classes should never call this method. </p>
|
||||
<p>If you are developing an asynchronous model-level service and finding that Mithril is not redrawing the view after your code runs, you should use <a href="mithril.computation.html"><code>m.startComputation</code> and <code>m.endComputation</code></a> to integrate with Mithril's auto-redrawing system instead.</p>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ where:
|
|||
<p>A DOM element which will contain the template represented by <code>children</code>.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the <code>root</code> element.</p>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -280,7 +280,7 @@ m("a[href='/dashboard/alicesmith']", {config: m.route});</code
|
|||
<p>an anchor element <code><a></code> with an <code>href</code> attribute that points to a route</p>
|
||||
</li>
|
||||
<li><p><strong>Boolean isInitialized</strong></p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril"><code>m()</code></a>)</p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril.html"><code>m()</code></a>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-sync">m.sync</h2>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred.html"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<pre><code class="lang-javascript">var greetAsync = function(delay) {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
<div class="col(9,9,12)">
|
||||
<h2 id="m-withattr">m.withAttr</h2>
|
||||
<p>This is an event handler factory. It returns a method that can be bound to a DOM element's event listener.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop.html"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>This method is provided to decouple the browser's event model from the controller/logic model.</p>
|
||||
<p>You should use this method and implement similar ones when extracting values from a browser's Event object, instead of hard-coding the extraction code into controllers (or model methods).</p>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<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="community.html">Community</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.15)</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, params)</a></li>
|
||||
<li><a href="mithril.route.html#reading-current-route">m.route()</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)">
|
||||
|
||||
</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>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<p>This is in stark contrast to the ActiveRecord pattern of other frameworks, where model entities are largely object representations of database entities and these entities are manipulated in controllers in an ad-hoc field-by-field fashion, and then "committed" via a <code>save</code> method.</p>
|
||||
<p>Because Mithril encourages all entity logic to be done in the model layer, it's idiomatic to create modules with model-level classes that deal specifically with relationships between entities, when there isn't already a model entity that can logically hold the relational business logic.</p>
|
||||
<p>Models are also responsible for centralizing tasks such as filtering of entity lists and validation routines, so that access to these methods is available across the application.</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates with Mithril's auto-redrawing system (see <a href="mithril.computation"><code>m.startComputation</code> / <code>m.endComputation</code></a>).</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril.html"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw.html"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates with Mithril's auto-redrawing system (see <a href="mithril.computation.html"><code>m.startComputation</code> / <code>m.endComputation</code></a>).</p>
|
||||
<hr>
|
||||
<h2 id="file-separation">File Separation</h2>
|
||||
<p>The examples in this site usually conflate different MVC layers together for the sake of readability, but normally it's recommended that each layer on a module be in different files. For example:</p>
|
||||
|
|
|
|||
|
|
@ -194,7 +194,7 @@ where:
|
|||
<li><p><strong>GetterSetter { Promise then([any successCallback(any value) [, any errorCallback(any value)]]) } promise</strong></p>
|
||||
<p>A promise has a method called <code>then</code> which takes two computation callbacks as parameters.</p>
|
||||
<p>The <code>then</code> method returns another promise whose computations (if any) receive their inputs from the parent promise's computation.</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop.html"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<ul>
|
||||
<li><p><strong>Promise then([any successCallback(any value) [, any errorCallback(any value)]])</strong></p>
|
||||
<p>This method accepts two callbacks which process a value passed to the <code>resolve</code> and <code>reject</code> methods, respectively, and pass the processed value to the returned promise</p>
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m">m</h2>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<p>You are encouraged to use CSS selectors to define virtual elements. See "Signature" section for details.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
m("div", "Hello"); //yields <div>Hello</div>
|
||||
|
||||
m("div", {class: "container"}, "Hello"); //yields <div class="container">Hello</div></code></pre>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<pre><code class="lang-javascript">m.render(document.body, m("br")); //puts a <br> in <body></code></pre>
|
||||
<p>You can also use more complex CSS selectors:</p>
|
||||
<pre><code class="lang-javascript">m(".container"); //yields <div class="container"></div>
|
||||
|
|
@ -174,7 +174,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -261,7 +261,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -292,13 +292,13 @@ m("a[href='/dashboard']", {config: m.route}, "Dashboard&q
|
|||
m("div", {config: alertsRedrawCount})</code></pre>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong> (optional)</p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the element being created.</p>
|
||||
<p>If it's a SubtreeDirective with the value "retain", it will retain the existing DOM tree in place, if any. See <a href="mithril.render#subtree-directives">subtree directives</a> for more information.</p>
|
||||
</li>
|
||||
<li><p><strong>returns</strong> VirtualElement</p>
|
||||
<p>The returned VirtualElement is a Javascript data structure that represents the DOM element to be rendered by <a href="mithril.render"><code>m.render</code></a></p>
|
||||
<p>The returned VirtualElement is a Javascript data structure that represents the DOM element to be rendered by <a href="mithril.render.html"><code>m.render</code></a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@ name("Mary"); //Mary
|
|||
|
||||
//read the value
|
||||
var b = name(); //b == "Mary"</code></pre>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr.html"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<pre><code class="lang-javascript">//a contrived example of bi-directional data binding
|
||||
var user = {
|
||||
model: function(name) {
|
||||
|
|
@ -91,7 +91,7 @@ var user = {
|
|||
}
|
||||
};</code></pre>
|
||||
<p>In the example above, the usage of <code>m.prop</code> allows the developer to change the implementation of the user name getter/setter without the need for code changes in the controller and view.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred.html"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<pre><code class="lang-javascript">var users = m.prop([]);
|
||||
var error = m.prop("");
|
||||
|
||||
|
|
|
|||
|
|
@ -61,11 +61,11 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-redraw">m.redraw</h2>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module.html"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>This method is called internally by Mithril's auto-redrawing system. Usually you don't need to call it manually unless you are doing recurring asynchronous operations (i.e. using <code>setInterval</code>) or if you want to decouple slow running background requests from the rendering context (see the <code>background</code> option in <a href="mithril.request.html"><code>m.request</code></a>.</p>
|
||||
<p>By default, if you're using either <a href="mithril.route.html"><code>m.route</code></a> or <a href="mithril.module.html"><code>m.module</code></a>, <code>m.redraw()</code> is called automatically by Mithril's auto-redrawing system once the controller finishes executing.</p>
|
||||
<p><code>m.redraw</code> is also called automatically on event handlers defined in virtual elements.</p>
|
||||
<p>Note that calling this method will not do anything if a module was not activated via either <a href="mithril.module"><code>m.module()</code></a> or <a href="mithril.route"><code>m.route()</code></a>. This means that <code>m.redraw</code> doesn't do anything when instantiating controllers and rendering views via <code>m.render</code> manually.</p>
|
||||
<p>Note that calling this method will not do anything if a module was not activated via either <a href="mithril.module.html"><code>m.module()</code></a> or <a href="mithril.route.html"><code>m.route()</code></a>. This means that <code>m.redraw</code> doesn't do anything when instantiating controllers and rendering views via <code>m.render</code> manually.</p>
|
||||
<p>If there are pending <a href="mithril.request.html"><code>m.request</code></a> calls in either a controller constructor or event handler, the auto-redrawing system waits for all the AJAX requests to complete before calling <code>m.redraw</code>.</p>
|
||||
<p>This method may also be called manually from within a controller if more granular updates to the view are needed, however doing so is generally not recommended, as it may degrade performance. Model classes should never call this method. </p>
|
||||
<p>If you are developing an asynchronous model-level service and finding that Mithril is not redrawing the view after your code runs, you should use <a href="mithril.computation.html"><code>m.startComputation</code> and <code>m.endComputation</code></a> to integrate with Mithril's auto-redrawing system instead.</p>
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ where:
|
|||
<p>A DOM element which will contain the template represented by <code>children</code>.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the <code>root</code> element.</p>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -280,7 +280,7 @@ m("a[href='/dashboard/alicesmith']", {config: m.route});</code
|
|||
<p>an anchor element <code><a></code> with an <code>href</code> attribute that points to a route</p>
|
||||
</li>
|
||||
<li><p><strong>Boolean isInitialized</strong></p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril"><code>m()</code></a>)</p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril.html"><code>m()</code></a>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-sync">m.sync</h2>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred.html"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<pre><code class="lang-javascript">var greetAsync = function(delay) {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
<div class="col(9,9,12)">
|
||||
<h2 id="m-withattr">m.withAttr</h2>
|
||||
<p>This is an event handler factory. It returns a method that can be bound to a DOM element's event listener.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop.html"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>This method is provided to decouple the browser's event model from the controller/logic model.</p>
|
||||
<p>You should use this method and implement similar ones when extracting values from a browser's Event object, instead of hard-coding the extraction code into controllers (or model methods).</p>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -1,77 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<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="community.html">Community</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.16)</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, params)</a></li>
|
||||
<li><a href="mithril.route.html#reading-current-route">m.route()</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)">
|
||||
|
||||
</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>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<p>This is in stark contrast to the ActiveRecord pattern of other frameworks, where model entities are largely object representations of database entities and these entities are manipulated in controllers in an ad-hoc field-by-field fashion, and then "committed" via a <code>save</code> method.</p>
|
||||
<p>Because Mithril encourages all entity logic to be done in the model layer, it's idiomatic to create modules with model-level classes that deal specifically with relationships between entities, when there isn't already a model entity that can logically hold the relational business logic.</p>
|
||||
<p>Models are also responsible for centralizing tasks such as filtering of entity lists and validation routines, so that access to these methods is available across the application.</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates with Mithril's auto-redrawing system (see <a href="mithril.computation"><code>m.startComputation</code> / <code>m.endComputation</code></a>).</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril.html"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw.html"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates with Mithril's auto-redrawing system (see <a href="mithril.computation.html"><code>m.startComputation</code> / <code>m.endComputation</code></a>).</p>
|
||||
<hr>
|
||||
<h2 id="file-separation">File Separation</h2>
|
||||
<p>The examples in this site usually conflate different MVC layers together for the sake of readability, but normally it's recommended that each layer on a module be in different files. For example:</p>
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@ where:
|
|||
<li><p><strong>GetterSetter { Promise then([any successCallback(any value) [, any errorCallback(any value)]]) } promise</strong></p>
|
||||
<p>A promise has a method called <code>then</code> which takes two computation callbacks as parameters.</p>
|
||||
<p>The <code>then</code> method returns another promise whose computations (if any) receive their inputs from the parent promise's computation.</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop.html"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<ul>
|
||||
<li><p><strong>Promise then([any successCallback(any value) [, any errorCallback(any value)]])</strong></p>
|
||||
<p>This method accepts two callbacks which process a value passed to the <code>resolve</code> and <code>reject</code> methods, respectively, and pass the processed value to the returned promise</p>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m">m</h2>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<p>You are encouraged to use CSS selectors to define virtual elements. See "Signature" section for details.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
m("div", "Hello"); //yields <div>Hello</div>
|
||||
|
||||
m("div", {class: "container"}, "Hello"); //yields <div class="container">Hello</div></code></pre>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<pre><code class="lang-javascript">m.render(document.body, m("br")); //puts a <br> in <body></code></pre>
|
||||
<p>You can also use more complex CSS selectors:</p>
|
||||
<pre><code class="lang-javascript">m(".container"); //yields <div class="container"></div>
|
||||
|
|
@ -176,7 +176,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -302,7 +302,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -349,13 +349,13 @@ m.render(document, m("div", {config: unloadable}));
|
|||
m.render(document, m("a")); //logs `unloaded the div` and `alert` never gets called</code></pre>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong> (optional)</p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the element being created.</p>
|
||||
<p>If it's a SubtreeDirective with the value "retain", it will retain the existing DOM tree in place, if any. See <a href="mithril.render#subtree-directives">subtree directives</a> for more information.</p>
|
||||
</li>
|
||||
<li><p><strong>returns</strong> VirtualElement</p>
|
||||
<p>The returned VirtualElement is a Javascript data structure that represents the DOM element to be rendered by <a href="mithril.render"><code>m.render</code></a></p>
|
||||
<p>The returned VirtualElement is a Javascript data structure that represents the DOM element to be rendered by <a href="mithril.render.html"><code>m.render</code></a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ name("Mary"); //Mary
|
|||
|
||||
//read the value
|
||||
var b = name(); //b == "Mary"</code></pre>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr.html"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<pre><code class="lang-javascript">//a contrived example of bi-directional data binding
|
||||
var user = {
|
||||
model: function(name) {
|
||||
|
|
@ -92,7 +92,7 @@ var user = {
|
|||
}
|
||||
};</code></pre>
|
||||
<p>In the example above, the usage of <code>m.prop</code> allows the developer to change the implementation of the user name getter/setter without the need for code changes in the controller and view.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred.html"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<pre><code class="lang-javascript">var users = m.prop([]);
|
||||
var error = m.prop("");
|
||||
|
||||
|
|
|
|||
|
|
@ -62,11 +62,11 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-redraw">m.redraw</h2>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module.html"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>This method is called internally by Mithril's auto-redrawing system. Usually you don't need to call it manually unless you are doing recurring asynchronous operations (i.e. using <code>setInterval</code>) or if you want to decouple slow running background requests from the rendering context (see the <code>background</code> option in <a href="mithril.request.html"><code>m.request</code></a>.</p>
|
||||
<p>By default, if you're using either <a href="mithril.route.html"><code>m.route</code></a> or <a href="mithril.module.html"><code>m.module</code></a>, <code>m.redraw()</code> is called automatically by Mithril's auto-redrawing system once the controller finishes executing.</p>
|
||||
<p><code>m.redraw</code> is also called automatically on event handlers defined in virtual elements.</p>
|
||||
<p>Note that calling this method will not do anything if a module was not activated via either <a href="mithril.module"><code>m.module()</code></a> or <a href="mithril.route"><code>m.route()</code></a>. This means that <code>m.redraw</code> doesn't do anything when instantiating controllers and rendering views via <code>m.render</code> manually.</p>
|
||||
<p>Note that calling this method will not do anything if a module was not activated via either <a href="mithril.module.html"><code>m.module()</code></a> or <a href="mithril.route.html"><code>m.route()</code></a>. This means that <code>m.redraw</code> doesn't do anything when instantiating controllers and rendering views via <code>m.render</code> manually.</p>
|
||||
<p>If there are pending <a href="mithril.request.html"><code>m.request</code></a> calls in either a controller constructor or event handler, the auto-redrawing system waits for all the AJAX requests to complete before calling <code>m.redraw</code>.</p>
|
||||
<p>This method may also be called manually from within a controller if more granular updates to the view are needed, however doing so is generally not recommended, as it may degrade performance. Model classes should never call this method. </p>
|
||||
<p>If you are developing an asynchronous model-level service and finding that Mithril is not redrawing the view after your code runs, you should use <a href="mithril.computation.html"><code>m.startComputation</code> and <code>m.endComputation</code></a> to integrate with Mithril's auto-redrawing system instead.</p>
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ where:
|
|||
<p>A DOM element which will contain the template represented by <code>children</code>.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the <code>root</code> element.</p>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -281,7 +281,7 @@ m("a[href='/dashboard/alicesmith']", {config: m.route});</code
|
|||
<p>an anchor element <code><a></code> with an <code>href</code> attribute that points to a route</p>
|
||||
</li>
|
||||
<li><p><strong>Boolean isInitialized</strong></p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril"><code>m()</code></a>)</p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril.html"><code>m()</code></a>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-sync">m.sync</h2>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred.html"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<pre><code class="lang-javascript">var greetAsync = function(delay) {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
<div class="col(9,9,12)">
|
||||
<h2 id="m-withattr">m.withAttr</h2>
|
||||
<p>This is an event handler factory. It returns a method that can be bound to a DOM element's event listener.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop.html"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>This method is provided to decouple the browser's event model from the controller/logic model.</p>
|
||||
<p>You should use this method and implement similar ones when extracting values from a browser's Event object, instead of hard-coding the extraction code into controllers (or model methods).</p>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -1,78 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<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="community.html">Community</a>
|
||||
<a href="http://lhorie.github.io/mithril-blog">Blog</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.17)</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, params)</a></li>
|
||||
<li><a href="mithril.route.html#reading-current-route">m.route()</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)">
|
||||
|
||||
</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>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
<p>This is in stark contrast to the ActiveRecord pattern of other frameworks, where model entities are largely object representations of database entities and these entities are manipulated in controllers in an ad-hoc field-by-field fashion, and then "committed" via a <code>save</code> method.</p>
|
||||
<p>Because Mithril encourages all entity logic to be done in the model layer, it's idiomatic to create modules with model-level classes that deal specifically with relationships between entities, when there isn't already a model entity that can logically hold the relational business logic.</p>
|
||||
<p>Models are also responsible for centralizing tasks such as filtering of entity lists and validation routines, so that access to these methods is available across the application.</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates with Mithril's auto-redrawing system (see <a href="mithril.computation"><code>m.startComputation</code> / <code>m.endComputation</code></a>).</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril.html"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw.html"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates with Mithril's auto-redrawing system (see <a href="mithril.computation.html"><code>m.startComputation</code> / <code>m.endComputation</code></a>).</p>
|
||||
<hr>
|
||||
<h2 id="file-separation">File Separation</h2>
|
||||
<p>The examples in this site usually conflate different MVC layers together for the sake of readability, but normally it's recommended that each layer on a module be in different files. For example:</p>
|
||||
|
|
|
|||
|
|
@ -195,7 +195,7 @@ where:
|
|||
<li><p><strong>GetterSetter { Promise then([any successCallback(any value) [, any errorCallback(any value)]]) } promise</strong></p>
|
||||
<p>A promise has a method called <code>then</code> which takes two computation callbacks as parameters.</p>
|
||||
<p>The <code>then</code> method returns another promise whose computations (if any) receive their inputs from the parent promise's computation.</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<p>A promise is also a getter-setter (see <a href="mithril.prop.html"><code>m.prop</code></a>). After a call to either <code>resolve</code> or <code>reject</code>, it holds the result of the parent's computation (or the <code>resolve</code>/<code>reject</code> value, if the promise has no parent promises)</p>
|
||||
<ul>
|
||||
<li><p><strong>Promise then([any successCallback(any value) [, any errorCallback(any value)]])</strong></p>
|
||||
<p>This method accepts two callbacks which process a value passed to the <code>resolve</code> and <code>reject</code> methods, respectively, and pass the processed value to the returned promise</p>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m">m</h2>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>This is a convenience method to compose virtual elements that can be rendered via <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<p>You are encouraged to use CSS selectors to define virtual elements. See "Signature" section for details.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
m("div", "Hello"); //yields <div>Hello</div>
|
||||
|
||||
m("div", {class: "container"}, "Hello"); //yields <div class="container">Hello</div></code></pre>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render"><code>m.render()</code></a>.</p>
|
||||
<p>Note that the output value from <code>m()</code> is not an actual DOM element. In order to turn the virtual element into a real DOM element, you must call <a href="mithril.render.html"><code>m.render()</code></a>.</p>
|
||||
<pre><code class="lang-javascript">m.render(document.body, m("br")); //puts a <br> in <body></code></pre>
|
||||
<p>You can also use more complex CSS selectors:</p>
|
||||
<pre><code class="lang-javascript">m(".container"); //yields <div class="container"></div>
|
||||
|
|
@ -176,7 +176,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -302,7 +302,7 @@ m.render(document.body, view);
|
|||
|
||||
//here, isInitialized is `true`
|
||||
m.render(document.body, view);</code></pre>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<p>One common way of using <code>config</code> is in conjunction with <a href="mithril.route.html"><code>m.route</code></a>, which is an unobtrusive extension to links that allow Mithril's routing system to work transparently regardless of which routing mode is used.</p>
|
||||
<pre><code class="lang-javascript">//this link can use any of Mithril's routing system modes
|
||||
//(i.e. it can use either the hash, the querystring or the pathname as the router implementation)
|
||||
//without needing to hard-code any syntax (`#` or `?`) in the `href` attribute.
|
||||
|
|
@ -349,13 +349,13 @@ m.render(document, m("div", {config: unloadable}));
|
|||
m.render(document, m("a")); //logs `unloaded the div` and `alert` never gets called</code></pre>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong> (optional)</p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the element being created.</p>
|
||||
<p>If it's a SubtreeDirective with the value "retain", it will retain the existing DOM tree in place, if any. See <a href="mithril.render#subtree-directives">subtree directives</a> for more information.</p>
|
||||
</li>
|
||||
<li><p><strong>returns</strong> VirtualElement</p>
|
||||
<p>The returned VirtualElement is a Javascript data structure that represents the DOM element to be rendered by <a href="mithril.render"><code>m.render</code></a></p>
|
||||
<p>The returned VirtualElement is a Javascript data structure that represents the DOM element to be rendered by <a href="mithril.render.html"><code>m.render</code></a></p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ name("Mary"); //Mary
|
|||
|
||||
//read the value
|
||||
var b = name(); //b == "Mary"</code></pre>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<p>It can be used in conjunction with <a href="mithril.withattr.html"><code>m.withAttr</code></a> to implement data binding in the view-to-model direction and to provide uniform data access for model entity properties.</p>
|
||||
<pre><code class="lang-javascript">//a contrived example of bi-directional data binding
|
||||
var user = {
|
||||
model: function(name) {
|
||||
|
|
@ -92,7 +92,7 @@ var user = {
|
|||
}
|
||||
};</code></pre>
|
||||
<p>In the example above, the usage of <code>m.prop</code> allows the developer to change the implementation of the user name getter/setter without the need for code changes in the controller and view.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<p><code>m.prop</code> can also be used in conjunction with <a href="mithril.request"><code>m.request</code></a> and <a href="mithril.deferred.html"><code>m.deferred</code></a> to bind data on completion of an asynchronous operation.</p>
|
||||
<pre><code class="lang-javascript">var users = m.prop([]);
|
||||
var error = m.prop("");
|
||||
|
||||
|
|
|
|||
|
|
@ -62,11 +62,11 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-redraw">m.redraw</h2>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>Redraws the view for the currently active module. Use <a href="mithril.module.html"><code>m.module()</code></a> to activate a module.</p>
|
||||
<p>This method is called internally by Mithril's auto-redrawing system. Usually you don't need to call it manually unless you are doing recurring asynchronous operations (i.e. using <code>setInterval</code>) or if you want to decouple slow running background requests from the rendering context (see the <code>background</code> option in <a href="mithril.request.html"><code>m.request</code></a>.</p>
|
||||
<p>By default, if you're using either <a href="mithril.route.html"><code>m.route</code></a> or <a href="mithril.module.html"><code>m.module</code></a>, <code>m.redraw()</code> is called automatically by Mithril's auto-redrawing system once the controller finishes executing.</p>
|
||||
<p><code>m.redraw</code> is also called automatically on event handlers defined in virtual elements.</p>
|
||||
<p>Note that calling this method will not do anything if a module was not activated via either <a href="mithril.module"><code>m.module()</code></a> or <a href="mithril.route"><code>m.route()</code></a>. This means that <code>m.redraw</code> doesn't do anything when instantiating controllers and rendering views via <code>m.render</code> manually.</p>
|
||||
<p>Note that calling this method will not do anything if a module was not activated via either <a href="mithril.module.html"><code>m.module()</code></a> or <a href="mithril.route.html"><code>m.route()</code></a>. This means that <code>m.redraw</code> doesn't do anything when instantiating controllers and rendering views via <code>m.render</code> manually.</p>
|
||||
<p>If there are pending <a href="mithril.request.html"><code>m.request</code></a> calls in either a controller constructor or event handler, the auto-redrawing system waits for all the AJAX requests to complete before calling <code>m.redraw</code>.</p>
|
||||
<p>This method may also be called manually from within a controller if more granular updates to the view are needed, however doing so is generally not recommended, as it may degrade performance. Model classes should never call this method. </p>
|
||||
<p>If you are developing an asynchronous model-level service and finding that Mithril is not redrawing the view after your code runs, you should use <a href="mithril.computation.html"><code>m.startComputation</code> and <code>m.endComputation</code></a> to integrate with Mithril's auto-redrawing system instead.</p>
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ where:
|
|||
<p>A DOM element which will contain the template represented by <code>children</code>.</p>
|
||||
</li>
|
||||
<li><p><strong>Children children</strong></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust"><code>m.trust</code></a></p>
|
||||
<p>If this argument is a string, it will be rendered as a text node. To render a string as HTML, see <a href="mithril.trust.html"><code>m.trust</code></a></p>
|
||||
<p>If it's a VirtualElement, it will be rendered as a DOM Element.</p>
|
||||
<p>If it's a list, its contents will recursively be rendered as appropriate and appended as children of the <code>root</code> element.</p>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -281,7 +281,7 @@ m("a[href='/dashboard/alicesmith']", {config: m.route});</code
|
|||
<p>an anchor element <code><a></code> with an <code>href</code> attribute that points to a route</p>
|
||||
</li>
|
||||
<li><p><strong>Boolean isInitialized</strong></p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril"><code>m()</code></a>)</p>
|
||||
<p>the method does not run if this flag is set to true. This is to make the method compatible with virtual DOM elements' <code>config</code> attribute (see <a href="mithril.html"><code>m()</code></a>)</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="m-sync">m.sync</h2>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<p>This method takes a list of promises and returns a promise that resolves when all promises in the input list have resolved. See <a href="mithril.deferred.html"><code>m.deferred</code></a> for more information on promises.</p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<pre><code class="lang-javascript">var greetAsync = function(delay) {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
<div class="col(9,9,12)">
|
||||
<h2 id="m-withattr">m.withAttr</h2>
|
||||
<p>This is an event handler factory. It returns a method that can be bound to a DOM element's event listener.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>Typically, it's used in conjunction with <a href="mithril.prop.html"><code>m.prop</code></a> to implement data binding in the view-to-model direction.</p>
|
||||
<p>This method is provided to decouple the browser's event model from the controller/logic model.</p>
|
||||
<p>You should use this method and implement similar ones when extracting values from a browser's Event object, instead of hard-coding the extraction code into controllers (or model methods).</p>
|
||||
<hr>
|
||||
|
|
|
|||
|
|
@ -1,78 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<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="community.html">Community</a>
|
||||
<a href="http://lhorie.github.io/mithril-blog">Blog</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.18)</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, params)</a></li>
|
||||
<li><a href="mithril.route.html#reading-current-route">m.route()</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)">
|
||||
|
||||
</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>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
<p>This is in stark contrast to the ActiveRecord pattern of other frameworks, where model entities are largely object representations of database entities and these entities are manipulated in controllers in an ad-hoc field-by-field fashion, and then "committed" via a <code>save</code> method.</p>
|
||||
<p>Because Mithril encourages all entity logic to be done in the model layer, it's idiomatic to create modules with model-level classes that deal specifically with relationships between entities, when there isn't already a model entity that can logically hold the relational business logic.</p>
|
||||
<p>Models are also responsible for centralizing tasks such as filtering of entity lists and validation routines, so that access to these methods is available across the application.</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates with Mithril's auto-redrawing system (see <a href="mithril.computation"><code>m.startComputation</code> / <code>m.endComputation</code></a>).</p>
|
||||
<p>DOM manipulation should be done in the view via <a href="mithril.html"><code>m()</code> and <code>config</code></a>. Controllers may explicitly call <a href="mithril.redraw.html"><code>m.redraw</code></a>, but, if possible, it's preferable to abstract this into a service which integrates with Mithril's auto-redrawing system (see <a href="mithril.computation.html"><code>m.startComputation</code> / <code>m.endComputation</code></a>).</p>
|
||||
<hr>
|
||||
<h2 id="file-separation">File Separation</h2>
|
||||
<p>The examples in this site usually conflate different MVC layers together for the sake of readability, but normally it's recommended that each layer on a module be in different files. For example:</p>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue