vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix ordering bug when mixing arrays with virtual elements

Browse source
This commit is contained in:
Leo Horie 2014-04-11 15:23:22 -04:00
parent 12256290a9
commit 70496946cf
61 changed files with 6872 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

141
archive/v0.1.5/mithril.prop.html Normal file
View file

@ -0,0 +1,141 @@
<!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>&#9675;</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.5)</h2>
<h3 id="core">Core</h3>
<ul>
<li><a href="mithril.html">m</a></li>
<li><a href="mithril.prop.html">m.prop</a></li>
<li><a href="mithril.withAttr.html">m.withAttr</a></li>
<li><a href="mithril.module.html">m.module</a></li>
<li><a href="mithril.trust.html">m.trust</a></li>
<li><a href="mithril.render.html">m.render</a></li>
<li><a href="mithril.redraw.html">m.redraw</a></li>
</ul>
<h3 id="routing">Routing</h3>
<ul>
<li><a href="mithril.route.html">m.route</a>
<ul>
<li><a href="mithril.route.html#defining-routes">m.route(rootElement, defaultRoute, routes)</a></li>
<li><a href="mithril.route.html#redirecting">m.route(path)</a></li>
<li><a href="mithril.route.html#mode-abstraction">m.route(element)</a></li>
<li><a href="mithril.route.html#mode">m.route.mode</a></li>
<li><a href="mithril.route.html#param">m.route.param</a></li>
</ul>
</li>
</ul>
<h3 id="data">Data</h3>
<ul>
<li><a href="mithril.request.html">m.request</a></li>
<li><a href="mithril.deferred.html">m.deferred</a></li>
<li><a href="mithril.sync.html">m.sync</a></li>
<li><a href="mithril.computation.html">m.startComputation / m.endComputation</a></li>
</ul>
<h2 id="archive">History</h2>
<ul>
<li><a href="roadmap.html">Roadmap</a></li>
<li><a href="change-log.html">Change log</a></li>
</ul>
</div>
<div class="col(9,9,12)">
<h2 id="m-prop">m.prop</h2>
<p>This is a getter-setter factory utility. It returns a function that stores information</p>
<hr>
<h3 id="usage">Usage</h3>
<pre><code class="lang-javascript">//define a getter-setter with initial value `John`
var name = m.prop(&quot;John&quot;);
//read the value
var a = name(); //a == &quot;John&quot;
//set the value to `Mary`
name(&quot;Mary&quot;); //Mary
//read the value
var b = name(); //b == &quot;Mary&quot;</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>
<pre><code class="lang-javascript">//a contrived example of bi-directional data binding
var user = {
model: function(name) {
this.name = m.prop(name);
},
controller: function() {
this.user = new user.model(&quot;John Doe&quot;);
},
view: function(controller) {
m.render(&quot;body&quot;, [
m(&quot;input&quot;, {onchange: m.withAttr(&quot;value&quot;, controller.user.name), value: controller.user.name()})
]);
}
};</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>
<pre><code class="lang-javascript">var users = m.prop([]);
var error = m.prop(&quot;&quot;);
m.request({method: &quot;GET&quot;, url: &quot;/users&quot;})
.then(users, error); //on success, `users` will be populated, otherwise `error` will be populated
//assuming the response contains the following data: `[{name: &quot;John&quot;}, {name: &quot;Mary&quot;}]`
//then when resolved (e.g. in a view), the `users` getter-setter will contain a list of User instances
//i.e. users()[0].name() == &quot;John&quot;</code></pre>
<hr>
<h3 id="signature">Signature</h3>
<p><a href="how-to-read-signatures.html">How to read signatures</a></p>
<pre><code class="lang-clike">GetterSetter prop([any initialValue])
where:
GetterSetter :: any getterSetter([any value])</code></pre>
<ul>
<li><p><strong>any initialValue</strong> (optional)</p>
<p>An initialization value. If not provided, the value of the getter-setter&#39;s internal store defaults to <code>undefined</code>.</p>
</li>
<li><p><strong>returns any getterSetter([any value])</strong></p>
<p>A getter-setter method.</p>
<ul>
<li><p><strong>any value</strong> (optional)</p>
<p>If provided, it updates the getter-setter&#39;s internal store to the provided value.</p>
<p>If not provided, return the current internally stored value.</p>
</li>
<li><p><strong>returns any value</strong></p>
<p>This method always returns the value of the internal store, regardless of whether it was updated or not.</p>
</li>
</ul>
</li>
</ul>
</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 />&copy; 2014 Leo Horie
</div>
</footer>
<script src="lib/prism/prism.js"></script>
</body>
</html>