v0.1.20
This commit is contained in:
Leo Horie
parent
bc5085eac0
commit
a0e39777cd
64 changed files with 7250 additions and 33 deletions
131
archive/v0.1.20/mithril.withAttr.html
Normal file
131
archive/v0.1.20/mithril.withAttr.html
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<!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.20)</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>
|
||||
<ul>
|
||||
<li><a href="mithril.redraw.html#strategy">m.redraw.strategy(strategy)</a></li>
|
||||
</ul>
|
||||
</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="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.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>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<pre><code class="lang-javascript">//standalone usage
|
||||
document.body.onclick = m.withAttr("title", function(value) {
|
||||
//alerts the title of the body element when it's clicked
|
||||
alert(value);
|
||||
})</code></pre>
|
||||
<p>A contrived example of bi-directional data binding</p>
|
||||
<pre><code class="lang-javascript">var user = {
|
||||
model: function(name) {
|
||||
this.name = m.prop(name);
|
||||
},
|
||||
controller: function() {
|
||||
this.user = new user.model("John Doe");
|
||||
},
|
||||
view: function(controller) {
|
||||
m.render("body", [
|
||||
m("input", {onchange: m.withAttr("value", controller.user.name), value: controller.user.name()})
|
||||
]);
|
||||
}
|
||||
};</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">EventHandler withAttr(String property, void callback(any value))
|
||||
|
||||
where:
|
||||
EventHandler :: void handler(Event e)</code></pre>
|
||||
<ul>
|
||||
<li><p><strong>String property</strong></p>
|
||||
<p>Defines the property of the DOM element whose value will be passed to the callback.</p>
|
||||
</li>
|
||||
<li><p><strong>void callback(any value)</strong></p>
|
||||
<p>This function will be called with the value of the defined property as an argument.</p>
|
||||
<ul>
|
||||
<li><p><strong>any value</strong></p>
|
||||
<p>This is the value of the defined DOM element's property.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><p><strong>returns EventHandler handler</strong></p>
|
||||
<p>This handler method can be assigned to properties like <code>onclick</code>, or passed as callbacks to <code>addEventListener</code>.</p>
|
||||
</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 />© 2014 Leo Horie
|
||||
</div>
|
||||
</footer>
|
||||
<script src="lib/prism/prism.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue