v0.2.4
This commit is contained in:
Leo Horie
parent
f226d56481
commit
5d2b6ea2b7
68 changed files with 11860 additions and 4 deletions
202
archive/v0.2.4/mithril.prop.html
Normal file
202
archive/v0.2.4/mithril.prop.html
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>m.prop
- Mithril</title>
|
||||
<meta name="description" value="Mithril.js - a Javascript Framework for Building Brilliant Applications" />
|
||||
<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">Learn</a>
|
||||
<a href="installation.html">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.2.4)</h2>
|
||||
<h3 id="core">Core</h3>
|
||||
<ul>
|
||||
<li><a href="mithril.html" title="A utility to create virtual elements">m</a></li>
|
||||
<li><a href="mithril.component.html" title="Parameterizes a component">m.component</a></li>
|
||||
<li><a href="mithril.mount.html" title="Renders a component">m.mount</a></li>
|
||||
<li><a href="mithril.prop.html" title="A getter-setter utility">m.prop</a></li>
|
||||
<li><a href="mithril.withAttr.html" title="A event handler factory utility">m.withAttr</a></li>
|
||||
</ul>
|
||||
<h3 id="routing">Routing</h3>
|
||||
<ul>
|
||||
<li><a href="mithril.route.html" title="A routing utility">m.route</a>
|
||||
<ul>
|
||||
<li><a href="mithril.route.html#defining-routes" title="Defines what routes exist">m.route(rootElement, defaultRoute, routes)</a></li>
|
||||
<li><a href="mithril.route.html#redirecting" title="Redirects to a route">m.route(path, params, replaceHistory)</a></li>
|
||||
<li><a href="mithril.route.html#reading-current-route" title="Read the current route">m.route()</a></li>
|
||||
<li><a href="mithril.route.html#mode-abstraction" title="Routing mode abstraction">m.route(element)</a></li>
|
||||
<li><a href="mithril.route.html#mode" title="Whether routing uses location hash, querystring or pathname">m.route.mode</a></li>
|
||||
<li><a href="mithril.route.html#param" title="Read an argument from a parameterized route">m.route.param</a></li>
|
||||
<li><a href="mithril.route.html#buildQueryString" title="Serialize data into querystring format">m.route.buildQueryString</a></li>
|
||||
<li><a href="mithril.route.html#parseQueryString" title="Read an argument from a parameterized route">m.route.parseQueryString</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 id="data">Data</h3>
|
||||
<ul>
|
||||
<li><a href="mithril.request.html" title="A high-level AJAX utility">m.request</a></li>
|
||||
<li><a href="mithril.deferred.html" title="A Promise factory">m.deferred</a></li>
|
||||
<li><a href="mithril.sync.html" title="A Promise aggregator">m.sync</a></li>
|
||||
</ul>
|
||||
<h3 id="html">HTML</h3>
|
||||
<ul>
|
||||
<li><a href="mithril.trust.html" title="A method to unescape HTML">m.trust</a></li>
|
||||
</ul>
|
||||
<h3 id="rendering">Rendering</h3>
|
||||
<ul>
|
||||
<li><a href="mithril.render.html" title="The lowest level rendering method">m.render</a></li>
|
||||
<li><a href="mithril.redraw.html" title="A high-level explicit rendering method">m.redraw</a>
|
||||
<ul>
|
||||
<li><a href="mithril.redraw.html#strategy" title="A flag that drives the rendering strategy for the next redraw">m.redraw.strategy(strategy)</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="mithril.computation.html" title="Utilities to integrate asynchronous contexts to the rendering system">m.startComputation / m.endComputation</a></li>
|
||||
</ul>
|
||||
<h3 id="data">Testing</h3>
|
||||
<ul>
|
||||
<li><a href="mithril.deps.html" title="The dependency injector">m.deps</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>
|
||||
<hr>
|
||||
<ul>
|
||||
<li><a href="#usage">Usage</a></li>
|
||||
<li><a href="#third-party-promise-library-support">Third-party promise library support</a></li>
|
||||
<li><a href="#serializing-getter-setters">Serializing getter-setters</a></li>
|
||||
<li><a href="#signature">Signature</a></li>
|
||||
</ul>
|
||||
<hr>
|
||||
<p>This is a getter-setter factory utility. It returns a function that stores information.</p>
|
||||
<p>Note that modifying the values of <code>m.prop</code> getter-setters does not trigger redrawing. Instead, Mithril's redrawing system relies on <a href="mithril.computation.html"><code>m.startComputation</code> and <code>m.endComputation</code></a>. These functions are internally called by Mithril when you initialize a component via <a href="mithril.mount.html"><code>m.mount</code></a> or <a href="mithril.route.html"><code>m.route</code></a>, and when you trigger event handlers that were created within templates with <a href="mithril.html"><code>m()</code></a>. </p>
|
||||
<hr>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<pre><code class="lang-javascript">//define a getter-setter with initial value `John`
|
||||
var name = m.prop("John");
|
||||
|
||||
//read the value
|
||||
var a = name(); //a == "John"
|
||||
|
||||
//set the value to `Mary`
|
||||
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.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) {
|
||||
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>
|
||||
<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.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("");
|
||||
|
||||
m.request({method: "GET", url: "/users"})
|
||||
.then(users, error); //on success, `users` will be populated, otherwise `error` will be populated
|
||||
//assuming the response contains the following data: `[{name: "John"}, {name: "Mary"}]`
|
||||
//then when resolved (e.g. in a view), the `users` getter-setter will contain a list of User instances
|
||||
//i.e. users()[0].name() == "John"
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3 id="third-party-promise-library-support">Third-party promise library support</h3>
|
||||
<p>If a promise is passed into <code>m.prop()</code>, a Mithril promise is returned. Mithril promises are also getter-setter functions, which are populated with the resolved value if the promise is fulfilled successfully.</p>
|
||||
<p>Until the promise is resolved, the value of the prop will resolve to <code>undefined</code></p>
|
||||
<p>Here's an example using the <a href="https://github.com/kriskowal/q">Q</a> promise library:</p>
|
||||
<pre><code class="lang-javascript">var deferred = Q.defer()
|
||||
var users = m.prop(deferred.promise)
|
||||
|
||||
users() // undefined
|
||||
|
||||
deferred.resolve("Hello")
|
||||
|
||||
//wait for next tick for Q's A+ compliant promise to actually resolve
|
||||
setTimeout(function() {
|
||||
|
||||
users() // Hello
|
||||
users.then(function(value) {
|
||||
console.log(value) //Hello
|
||||
})
|
||||
|
||||
}, 1000)
|
||||
</code></pre>
|
||||
<hr>
|
||||
<h3 id="serializing-getter-setters">Serializing getter-setters</h3>
|
||||
<p>Getter-setters are JSON-serializable:</p>
|
||||
<pre><code class="lang-javascript">var data = {foo: m.prop("bar")};
|
||||
JSON.stringify(data); // '{"foo": "bar"}'
|
||||
</code></pre>
|
||||
<p>This allows getter-setters to be passed directly as parameters to <a href="mithril.request.html"><code>m.request</code></a>, for example.</p>
|
||||
<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'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'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 />© 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