Merge branch 'next' into promises
Conflicts: mithril.js
This commit is contained in:
Zolmeister
commit
7639444aa1
280 changed files with 12495 additions and 1568 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
140
archive/v0.1.19/auto-redrawing.html
Normal file
140
archive/v0.1.19/auto-redrawing.html
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<!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="core-topics">Core Topics</h2>
|
||||
<ul>
|
||||
<li><a href="installation.html">Installation</a></li>
|
||||
<li><a href="getting-started.html">Getting Started</a></li>
|
||||
<li><a href="routing.html">Routing</a></li>
|
||||
<li><a href="web-services.html">Web Services</a></li>
|
||||
<li><a href="components.html">Components</a></li>
|
||||
</ul>
|
||||
<h2 id="advanced-topics.html">Advanced Topics</h2>
|
||||
<ul>
|
||||
<li><a href="compiling-templates.html">Compiling Templates</a></li>
|
||||
<li><a href="auto-redrawing.html">The Auto-Redrawing System</a></li>
|
||||
<li><a href="integration.html">Integrating with Other Libraries</a></li>
|
||||
</ul>
|
||||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="integrating-with-the-auto-redrawing-system">Integrating with The Auto-Redrawing System</h2>
|
||||
<p>If you need to do custom asynchronous calls without using Mithril's API, and find that your views are not redrawing, or that you're being forced to call <a href="mithril.redraw.html"><code>m.redraw</code></a> manually, you should consider using <code>m.startComputation</code> / <code>m.endComputation</code> so that Mithril can intelligently auto-redraw once your custom code finishes running.</p>
|
||||
<p>In order to integrate asynchronous code to Mithril's autoredrawing system, you should call <code>m.startComputation</code> BEFORE making an asynchronous call, and <code>m.endComputation</code> after the asynchronous callback completes.</p>
|
||||
<pre><code class="lang-javascript">//this service waits 1 second, logs "hello" and then notifies the view that
|
||||
//it may start redrawing (if no other asynchronous operations are pending)
|
||||
var doStuff = function() {
|
||||
m.startComputation(); //call `startComputation` before the asynchronous `setTimeout`
|
||||
|
||||
setTimeout(function() {
|
||||
console.log("hello");
|
||||
|
||||
m.endComputation(); //call `endComputation` at the end of the callback
|
||||
}, 1000);
|
||||
};</code></pre>
|
||||
<p>To integrate synchronous code, call <code>m.startComputation</code> at the beginning of the method, and <code>m.endComputation</code> at the end.</p>
|
||||
<pre><code class="lang-javascript">window.onfocus = function() {
|
||||
m.startComputation(); //call before everything else in the event handler
|
||||
|
||||
doStuff();
|
||||
|
||||
m.endComputation(); //call after everything else in the event handler
|
||||
}</code></pre>
|
||||
<p>For each <code>m.startComputation</code> call a library makes, it MUST also make one and ONLY one corresponding <code>m.endComputation</code> call.</p>
|
||||
<p>You should not use these methods if your code is intended to run repeatedly (e.g. by using <code>setInterval</code>). If you want to repeatedly redraw the view without necessarily waiting for user input, you should manually call <a href="mithril.redraw.html"><code>m.redraw</code></a> within the repeatable context.</p>
|
||||
<hr>
|
||||
<h3 id="integrating-multiple-execution-threads">Integrating multiple execution threads</h3>
|
||||
<p>When <a href="integration.html">integrating with third party libraries</a>, you might find that you need to call asynchronous methods from outside of Mithril's API.</p>
|
||||
<p>In order to integrate non-trivial asynchronous code with Mithril's auto-redrawing system, you need to ensure all execution threads call <code>m.startComputation</code> / <code>m.endComputation</code>.</p>
|
||||
<p>An execution thread is basically any amount of code that runs before other asynchronous threads start to run.</p>
|
||||
<p>Integrating multiple execution threads can be done in two different ways: in a layered fashion or in comprehensive fashion.</p>
|
||||
<h4 id="layered-integration">Layered integration</h4>
|
||||
<p>Layered integration is recommended for modular code where many different APIs may be put together at the application level.</p>
|
||||
<p>Below is an example where various methods implemented with a third party library can be integrated in layered fashion: any of the methods can be used in isolation or in combination.</p>
|
||||
<p>Notice how <code>doBoth</code> repeatedly calls <code>m.startComputation</code> since that method calls both <code>doSomething</code> and <code>doAnother</code>. This is perfectly valid: there are three asynchronous computations pending after the <code>jQuery.when</code> method is called, and therefore, three pairs of <code>m.startComputation</code> / <code>m.endComputation</code> in play.</p>
|
||||
<pre><code class="lang-javascript">var doSomething = function(callback) {
|
||||
m.startComputation(); //call `startComputation` before the asynchronous AJAX request
|
||||
|
||||
return jQuery.ajax("/something").done(function() {
|
||||
if (callback) callback();
|
||||
|
||||
m.endComputation(); //call `endComputation` at the end of the callback
|
||||
});
|
||||
};
|
||||
var doAnother = function(callback) {
|
||||
m.startComputation(); //call `startComputation` before the asynchronous AJAX request
|
||||
|
||||
return jQuery.ajax("/another").done(function() {
|
||||
if (callback) callback();
|
||||
m.endComputation(); //call `endComputation` at the end of the callback
|
||||
});
|
||||
};
|
||||
var doBoth = function(callback) {
|
||||
m.startComputation(); //call `startComputation` before the asynchronous synchronization method
|
||||
|
||||
jQuery.when(doSomething(), doAnother()).then(function() {
|
||||
if (callback) callback();
|
||||
|
||||
m.endComputation(); //call `endComputation` at the end of the callback
|
||||
})
|
||||
};</code></pre>
|
||||
<h4 id="comprehensive-integration">Comprehensive integration</h4>
|
||||
<p>Comprehensive integration is recommended if integrating a monolithic series of asynchronous operations. In contrast to layered integration, it minimizes the number of <code>m.startComputation</code> / <code>m.endComputation</code> calls to avoid clutter.</p>
|
||||
<p>The example below shows a convoluted series of AJAX requests implemented with a third party library.</p>
|
||||
<pre><code class="lang-javascript">var doSomething = function(callback) {
|
||||
m.startComputation(); //call `startComputation` before everything else
|
||||
|
||||
jQuery.ajax("/something").done(function() {
|
||||
doStuff();
|
||||
jQuery.ajax("/another").done(function() {
|
||||
doMoreStuff();
|
||||
jQuery.ajax("/more").done(function() {
|
||||
if (callback) callback();
|
||||
|
||||
m.endComputation(); //call `endComputation` at the end of everything
|
||||
});
|
||||
});
|
||||
});
|
||||
};</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>
|
||||
<br />© 2014 Leo Horie
|
||||
</div>
|
||||
</footer>
|
||||
<script src="lib/prism/prism.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
93
archive/v0.1.19/benchmarks.html
Normal file
93
archive/v0.1.19/benchmarks.html
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<!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="core-topics">Core Topics</h2>
|
||||
<ul>
|
||||
<li><a href="installation.html">Installation</a></li>
|
||||
<li><a href="getting-started.html">Getting Started</a></li>
|
||||
<li><a href="routing.html">Routing</a></li>
|
||||
<li><a href="web-services.html">Web Services</a></li>
|
||||
<li><a href="components.html">Components</a></li>
|
||||
</ul>
|
||||
<h2 id="advanced-topics.html">Advanced Topics</h2>
|
||||
<ul>
|
||||
<li><a href="compiling-templates.html">Compiling Templates</a></li>
|
||||
<li><a href="auto-redrawing.html">The Auto-Redrawing System</a></li>
|
||||
<li><a href="integration.html">Integrating with Other Libraries</a></li>
|
||||
</ul>
|
||||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="benchmarks.html">Benchmarks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
<h2 id="benchmarks">Benchmarks</h2>
|
||||
<p>These benchmarks were designed to measure Javascript running time for Mithril in comparison with other popular Javascript MVC frameworks. Javascript running time is significant because the gzipped size of a framework can be misleading in terms of how much code actually runs on page loads. In my experience, page loads happen far more commonly than one would expect in single page applications: power users open multiple tabs, and mobile users open and close the browser very frequently. And as far as templating engines go, the initial page load represents the worst case for the rendering algorithm since there is very little room for performance optimization tricks. It's arguably also <a href="http://blog.kissmetrics.com/loading-time/">one of the most important metrics when it comes to performance</a>.</p>
|
||||
<p>The numbers shown here are best-run results for all frameworks, except for Mithril's case, for which I'm taking the worst-run result. The numbers aren't statistically rigorous (e.g. I didn't bother to calculate standard deviation), but they should be enough to give a rough idea of what is faster than what.</p>
|
||||
<p>Generally speaking, these tests are making a deliberate effort to be <strong>biased in favor of other frameworks:</strong> for example, I don't load "optional-but-usually-used-in-real-life" things like the router module for Angular, or Marionette in Backbone's case, and I load the entirety of Mithril. In addition, this test deliberately avoids triggering <code>requestAnimationFrame</code>-based performance optimizations for Mithril, since this optimization does not exist in many frameworks and <a href="http://jsperf.com/angular-vs-knockout-vs-ember/308"><em>severely</em> skews numbers in Mithril's favor</a> in CPU-intensive situations like parallax sites. I'm also NOT using the <a href="compiling-templates.html">Mithril template compiler</a>, which would also skew the benchmark in Mithril's favor.</p>
|
||||
<p>To run the execution time tests below, click on their respective links, run the profiler from your desired browser's developer tools and measure the running time of a page refresh (lower is better).</p>
|
||||
<div class="performance" style="padding:0 0 0 10px;">
|
||||
<div class="row">
|
||||
<div class="col(4,4,6)">
|
||||
<h3>Loading</h3>
|
||||
<table>
|
||||
<tr><td><a href="comparisons/mithril.parsing.html">Mithril</a></td><td><span class="bar" style="background:#161;width:1%;"></span> 0.28ms</td></tr>
|
||||
<tr><td><a href="comparisons/jquery.parsing.html">jQuery</a></td><td><span class="bar" style="background:#66c;width:26%;"></span> 13.11ms</td></tr>
|
||||
<tr><td><a href="comparisons/backbone.parsing.html">Backbone</a></td><td><span class="bar" style="background:#33c;width:37%;"></span> 18.54ms</td></tr>
|
||||
<tr><td><a href="comparisons/angular.parsing.html">Angular</a></td><td><span class="bar" style="background:#c33;width:14%;"></span> 7.49ms</td></tr>
|
||||
<tr><td><a href="comparisons/react.parsing.html">React</a></td><td><span class="bar" style="background:#6af;width:50%;"></span> 24.99ms</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col(8,8,12)">
|
||||
<h3>Rendering</h3>
|
||||
<table>
|
||||
<tr><td><a href="comparisons/mithril.rendering.html">Mithril</a></td><td><span class="bar" style="background:#161;width:4%;"></span> 9.44ms (uncompiled)</td></tr>
|
||||
<tr><td><a href="comparisons/jquery.rendering.html">jQuery</a></td><td><span class="bar" style="background:#66c;width:17%;"></span> 40.27ms</td></tr>
|
||||
<tr><td><a href="comparisons/backbone.rendering.html">Backbone</a></td><td><span class="bar" style="background:#33c;width:10%;"></span> 23.05ms</td></tr>
|
||||
<tr><td><a href="comparisons/angular.rendering.html">Angular</a></td><td><span class="bar" style="background:#c33;width:50%;"></span> 118.63ms</td></tr>
|
||||
<tr><td><a href="comparisons/react.rendering.html">React</a></td><td><span class="bar" style="background:#6af;width:33%;"></span> 79.65ms</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Feel free to implement versions of the tests above in other frameworks, if you wish. The code is very simple.</p>
|
||||
|
||||
</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>
|
||||
20
archive/v0.1.19/bower.json
Normal file
20
archive/v0.1.19/bower.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "mithril",
|
||||
"version": "0.1.19",
|
||||
"main": "mithril.min.js",
|
||||
"description": "A Javascript Framework for building brilliant applications",
|
||||
"authors": ["Leo Horie <lhorie@hotmail.com>"],
|
||||
"license": "MIT",
|
||||
"ignore": [
|
||||
"*.html",
|
||||
"*.css",
|
||||
"*.zip",
|
||||
"*.json",
|
||||
"mithril-tests.js",
|
||||
"archive",
|
||||
"comparisons",
|
||||
"lib",
|
||||
"tools"
|
||||
],
|
||||
"keywords": ["mithril", "mvc", "framework"]
|
||||
}
|
||||
321
archive/v0.1.19/change-log.html
Normal file
321
archive/v0.1.19/change-log.html
Normal file
|
|
@ -0,0 +1,321 @@
|
|||
<!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.19)</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)">
|
||||
<h2 id="change-log">Change Log</h2>
|
||||
<p><a href="/mithril/archive/v0.1.19">v0.1.19</a> - maintenance</p>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>fixed double redraw when events fire simultaneously <a href="https://github.com/lhorie/mithril.js/issues/151">#151</a></li>
|
||||
<li>fixed node insertion bug when using document as root <a href="https://github.com/lhorie/mithril.js/issues/153">#153</a></li>
|
||||
<li>prevent routes from reverting to original route in some cases</li>
|
||||
<li>fixed nested array ordering <a href="https://github.com/lhorie/mithril.js/issues/156">#156</a></li>
|
||||
<li>fixed key ordering in interpolation case <a href="https://github.com/lhorie/mithril.js/issues/157">#157</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.18">v0.1.18</a> - maintenance</p>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>routing now correctly clears diff cache <a href="https://github.com/lhorie/mithril.js/issues/148">#148</a></li>
|
||||
<li>fixed incorrect context unloading when reattaching a child to a new parent</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.17">v0.1.17</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>config contexts can now have an <code>onunload</code> property for clean up tasks after elements are detached from the document</li>
|
||||
<li>route changes now re-render from scratch, rather than attempting a virtual dom diff</li>
|
||||
<li>virtual elements that are children of an array can now accept a <code>key</code> attribute which maintains the identity of the underlying DOM elements when the array gets shuffled <a href="https://github.com/lhorie/mithril.js/issues/98">#98</a></li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>fixed a subtree directive bug that happened in inputs inside loops</li>
|
||||
<li>fixed select.value so that the correct option is displayed on first render</li>
|
||||
<li>in m.request, non-idempotent methods now automatically send appropriate Content-Type header if <code>serialize</code> is <code>JSON.stringify</code> <a href="https://github.com/lhorie/mithril.js/issues/139">#139</a></li>
|
||||
<li><code>m</code> selectors now correctly handle empty attribute values like <code>[href='']</code></li>
|
||||
<li>pre-existing nodes in a root element now get cleared if there's no cell cache associated with the element <a href="https://github.com/lhorie/mithril.js/issues/60">#60</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.16">v0.1.16</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>controller::onunload now receives an event parameter so that the unloading can be aborted <a href="https://github.com/lhorie/mithril.js/issues/135">#135</a></li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>prevent route change when only hash changes in non-hash mode <a href="https://github.com/lhorie/mithril.js/issues/107">#107</a></li>
|
||||
<li>config now always runs after template is attached to document <a href="https://github.com/lhorie/mithril.js/issues/109">#109</a></li>
|
||||
<li>fix null reference exception with Browserify <a href="https://github.com/lhorie/mithril.js/issues/110">#110</a></li>
|
||||
<li>fix nested array removal edge cases <a href="https://github.com/lhorie/mithril.js/issues/120">#120</a></li>
|
||||
<li>ignore redraw calls when controller is not ready <a href="https://github.com/lhorie/mithril.js/issues/127">#127</a></li>
|
||||
<li>fix null reference exception in nested array edge case <a href="https://github.com/lhorie/mithril.js/issues/129">#129</a></li>
|
||||
<li>fix a contenteditable null reference error <a href="https://github.com/lhorie/mithril.js/issues/134">#134</a></li>
|
||||
<li>fix textarea value diffing when value is a node inside an array <a href="https://github.com/lhorie/mithril.js/issues/136">#136</a></li>
|
||||
<li>fix diff bug with trusted strings <a href="https://github.com/lhorie/mithril.js/issues/138">#138</a></li>
|
||||
</ul>
|
||||
<h3 id="breaking-changes-">Breaking changes:</h3>
|
||||
<ul>
|
||||
<li>Due to the poor level of compatibility between XDomainRequest and XHR2, XDomainRequest is no longer called internally by Mithril. If you need to use CORS in IE9 or lower, you will need to return an XDomainRequest instance from <code>m.request</code>'s <code>config</code> method <a href="https://github.com/lhorie/mithril.js/issues/121">#121</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.15">v0.1.15</a> - maintenance</p>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li><code>m.sync</code> now correctly passes arguments to resolver in same order as input arguments <a href="https://github.com/lhorie/mithril.js/issues/96">#96</a> </li>
|
||||
<li>fixed diff deletion bug <a href="https://github.com/lhorie/mithril.js/issues/99">#99</a> </li>
|
||||
<li>updating textarea attributes updates its value correctly <a href="https://github.com/lhorie/mithril.js/issues/100">#100</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.14">v0.1.14</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>The signature of <code>m</code> now accepts virtual elements as the second parameter of the function.</li>
|
||||
<li><code>m.route(path, params)</code> now accepts an argument that gets parsed as a querystring.</li>
|
||||
<li>routes now ignore trailing slashes <a href="https://github.com/lhorie/mithril.js/issues/88">#88</a></li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>Resolving promises early without a value now works <a href="https://github.com/lhorie/mithril.js/issues/85">#85</a></li>
|
||||
<li>Throwing exceptions within <code>m.request</code> now follow the same resolution procedure as <code>m.deferred</code> <a href="https://github.com/lhorie/mithril.js/issues/85">#86</a></li>
|
||||
<li>Promises now always update their <code>m.prop</code> on success (and leave the m.prop alone on error)</li>
|
||||
<li>Nested arrays no longer cause double removal of elements <a href="https://github.com/lhorie/mithril.js/issues/87">#87</a></li>
|
||||
<li>HTTP error codes now correctly reject promises</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.13">v0.1.13</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>m.module now runs clean-up code in root module controllers that implement an <code>onunload</code> instance method <a href="https://github.com/lhorie/mithril.js/issues/82">#82</a></li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>Removing CSS rules now diffs correctly <a href="https://github.com/lhorie/mithril.js/issues/79">#79</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.12">v0.1.12</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>It's now possible to define <a href="mithril.route.html#variadic-routes">variadic routes</a> <a href="https://github.com/lhorie/mithril.js/issues/70">#70</a></li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>Fix link location in links using <code>config: m.route</code> after redraws <a href="https://github.com/lhorie/mithril.js/issues/74">#74</a></li>
|
||||
<li>Fixed support for <code>list</code> attribute in inputs <a href="https://github.com/lhorie/mithril.js/issues/69">#69</a></li>
|
||||
<li>Fixed URL decoding in route params <a href="https://github.com/lhorie/mithril.js/issues/75">#75</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.11">v0.1.11</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>Added <code>m.route()</code> overload to allow reading of current route <a href="https://github.com/lhorie/mithril.js/issues/61">#61</a></li>
|
||||
<li>Added <code>background</code> option to <code>m.request</code> to allow requests that don't affect rendering <a href="https://github.com/lhorie/mithril.js/issues/62">#62</a></li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>Links using <code>config: m.route</code> can now be opened in new tab correctly <a href="https://github.com/lhorie/mithril.js/issues/64">#64</a></li>
|
||||
<li>Fixed diff within contenteditable areas <a href="https://github.com/lhorie/mithril.js/issues/65">#65</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.10">v0.1.10</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>Added social buttons to homepage</li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>Bi-directional bindings no longer wipe out cursor position in Chrome <a href="https://github.com/lhorie/mithril.js/issues/58">#58</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.9">v0.1.9</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>Added comparison with React to homepage</li>
|
||||
<li>Added support for multi-island apps <a href="https://github.com/lhorie/mithril.js/issues/34">#34</a></li>
|
||||
<li>m.prop is now JSON-serializable <a href="https://github.com/lhorie/mithril.js/issues/54">#54</a></li>
|
||||
<li>Added <code>extract</code> option to <code>m.request</code> to allow access to response metadata <a href="https://github.com/lhorie/mithril.js/issues/53">#53</a></li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>Fixed node index displacement by null/undefined nodes <a href="https://github.com/lhorie/mithril.js/issues/56">#56</a></li>
|
||||
<li>Fixed mock's insertBefore and appendChild when dealing w/ reattachments</li>
|
||||
</ul>
|
||||
<h3 id="breaking-changes-">Breaking changes:</h3>
|
||||
<ul>
|
||||
<li>changing an id in a virtual element now recreates the element, instead of recycling it <a href="https://github.com/lhorie/mithril.js/issues/55">#55</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.8">v0.1.8</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>Mock now contains a basic <code>insertAdjacentHTML</code> implementation to enable better testing of <code>m.trust</code> / <code>m.render</code> interactions</li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>Fixed ordering bug in deep subchildren <a href="https://github.com/lhorie/mithril.js/issues/51">#51</a></li>
|
||||
<li>Fixed ordering bug with trusted strings <a href="https://github.com/lhorie/mithril.js/issues/51">#51</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.7">v0.1.7</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>Mithril will be on a accelerated release cycle for the rest of the v0.1.x series. This means CDNs may lag behind in versions, so it's recommended that you either use one of the supported NodeJS package managers or fork from the Github repo directly. More information can be found <a href="https://groups.google.com/forum/#!msg/mithriljs/mc0qTgFTlgs/OD7Mc7_2Wa4J">here</a></li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>Fixed ordering bug when virtual element is preceded by array <a href="https://github.com/lhorie/mithril.js/issues/50">#50</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.6">v0.1.6</a> - maintenance</p>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>Fixed serious bug when mixing cached text nodes with new virtual elements <a href="https://github.com/lhorie/mithril.js/issues/49">#49</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.5">v0.1.5</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>Launched the <a href="http://lhorie.github.io/mithril-blog">Mithril Blog</a></li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>Fixed serious ordering problem when mixing arrays with virtual elements <a href="https://github.com/lhorie/mithril.js/issues/48">#48</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.4">v0.1.4</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>added regression tests for reported bugs</li>
|
||||
<li>added support for SVG</li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>URLs with port numbers are now handled correctly <a href="https://github.com/lhorie/mithril.js/issues/40">#40</a></li>
|
||||
<li>NPM package now contains unminified version for map files <a href="https://github.com/lhorie/mithril.js/issues/39">#39</a></li>
|
||||
<li>fixed ordering issue when mixing newly created virtual elements with elements from cache <a href="https://github.com/lhorie/mithril.js/issues/44">#44</a></li>
|
||||
<li>fixed caching bug in links w/ config option attached <a href="https://github.com/lhorie/mithril.js/issues/43">#43</a></li>
|
||||
<li>fixed attribute update bug when an element has both <code>oninput</code> and <code>onkeydown</code> handlers <a href="https://github.com/lhorie/mithril.js/issues/36">#36</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.3">v0.1.3</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>Mithril is now available via <a href="http://component.io">Component</a></li>
|
||||
<li>There's now an extra low-level optimization hook called a SubtreeDirective, which allows implementing plugins that only create virtual trees if necessary.</li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li>diff no longer touch the DOM when processing <code>style</code> attributes and event handlers</li>
|
||||
<li>returning a thennable to a resolution callback in <code>m.deferred().promise</code> now causes the promise to adopt its state </li>
|
||||
<li>diff now correctly clears subtree if null or undefined is passed as a node</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.2">v0.1.2</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>There's now a <a href="mailto:mithriljs@googlegroups.com">community mailing list</a>. There's also a <a href="https://groups.google.com/forum/#!forum/mithriljs">web interface</a></li>
|
||||
<li>Mithril is now on Travis CI. The build status can be found in the <a href="https://github.com/lhorie/mithril.js">project homepage</a></li>
|
||||
<li>Mithril is now available via the CommonJS and AMD API</li>
|
||||
<li>Mithril can now <a href="installation.html">be installed via npm and bower</a></li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li><code>m.render</code> now correctly reattaches reused DOM elements to replaced parent nodes <a href="https://github.com/lhorie/mithril.js/issues/31">#31</a></li>
|
||||
<li>UI actions that can potentially de-synchronize the DOM from cache now force synchronization <a href="https://github.com/lhorie/mithril.js/issues/29">#29</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1.1">v0.1.1</a> - maintenance</p>
|
||||
<h3 id="news-">News:</h3>
|
||||
<ul>
|
||||
<li>Mithril is now available at <a href="http://cdnjs.com/libraries/mithril/">cdnjs</a> and <a href="http://www.jsdelivr.com/#!mithril">jsdelivr</a></li>
|
||||
</ul>
|
||||
<h3 id="bug-fixes-">Bug Fixes:</h3>
|
||||
<ul>
|
||||
<li><code>m.route.param</code> now resets on route change correctly <a href="https://github.com/lhorie/mithril.js/issues/15">#15</a></li>
|
||||
<li><code>m.render</code> now correctly ignores undefined values in the virtual tree<a href="https://github.com/lhorie/mithril.js/issues/16">#16</a></li>
|
||||
<li>errors thrown in promises now cause downstreams to be rejected <a href="https://github.com/lhorie/mithril.js/issues/1">#1</a></li>
|
||||
</ul>
|
||||
<h3 id="breaking-changes-">Breaking changes:</h3>
|
||||
<ul>
|
||||
<li><p>changed default value for <code>xhr.withCredentials</code> from <code>true</code> to <code>false</code> for <code>m.request</code>, since public APIs are more common than auth-walled ones. <a href="https://github.com/lhorie/mithril.js/issues/14">#14</a></p>
|
||||
<p>In order to configure this flag, the following configuration should be used:</p>
|
||||
<pre><code class="lang-javascript">var privateAPI = function(xhr) {xhr.withCredentials = true};
|
||||
|
||||
m.request({method: "GET", url: "http://foo.com/api", config: privateAPI});</code></pre>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p><a href="/mithril/archive/v0.1">v0.1</a> - Initial release</p>
|
||||
|
||||
</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>
|
||||
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