96 lines
No EOL
5.1 KiB
HTML
96 lines
No EOL
5.1 KiB
HTML
<!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="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="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="tools">Tools</h2>
|
|
<h3 id="html-to-mithril-template-converter">HTML-to-Mithril Template Converter</h3>
|
|
<p>If you already have your HTML written and want to convert it into a Mithril template, you can use the tool below for one-off manual conversion.</p>
|
|
<p><a href="tools/template-converter.html">Template Converter</a></p>
|
|
<hr>
|
|
<h3 id="automatic-html-to-mithril-template-converter">Automatic HTML-to-Mithril Template Converter</h3>
|
|
<p>There's a tool called <a href="https://github.com/insin/msx">MSX by Jonathan Buchanan</a> that allows you to write templates using HTML syntax, and then automatically compile them to Javascript when files change.</p>
|
|
<p>It is useful for teams where styling and functionality are done by different people, and for those who prefer to maintain templates in HTML syntax.</p>
|
|
<p>The tool allows you to write code like this:</p>
|
|
<pre><code class="lang-javascript">todo.view = function(ctrl) {
|
|
return <html>
|
|
<body>
|
|
<input onchange={m.withAttr("value", ctrl.description)} value={ctrl.description()}/>
|
|
<button onclick={ctrl.add.bind(ctrl, ctrl.description)}>Add</button>
|
|
</body>
|
|
</html>
|
|
};</code></pre>
|
|
<p>Note, however, that since the code above is not valid Javascript, this syntax can only be used with a preprocessor build tool such as the provided <a href="http://gulpjs.com">Gulp.js</a> script.</p>
|
|
<p>This tool is also available as a <a href="https://github.com/mrsweaters/mithril-rails">Rails gem</a>, created by Jordan Humphreys.</p>
|
|
<hr>
|
|
<h3 id="mithril-template-compiler">Mithril Template Compiler</h3>
|
|
<p>You can pre-compile Mithril templates to make them run faster. For more information see this page:</p>
|
|
<p><a href="compiling-templates.html">Compiling Templates</a></p>
|
|
<hr>
|
|
<h3 id="internet-explorer-compatibility">Internet Explorer Compatibility</h3>
|
|
<p>Mithril relies on some Ecmascript 5 features, namely: <code>Array::indexOf</code> and <code>Object::keys</code>, as well as the <code>JSON</code> object.</p>
|
|
<p>You can use polyfill libraries to support these features in IE7.</p>
|
|
<ul>
|
|
<li><p><a href="https://github.com/es-shims/es5-shim">ES5 Shim</a> or Mozilla.org's <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf">Array::indexOf</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object::keys</a> polyfills</p>
|
|
</li>
|
|
<li><p><a href="https://github.com/douglascrockford/JSON-js/blob/master/json2.js">JSON2.js</a></p>
|
|
</li>
|
|
</ul>
|
|
<p>Mithril also has a dependency on XMLHttpRequest. If you wish to support IE6, you'll need <a href="https://gist.github.com/Contra/2709462">a shim for it</a>. IE7 and lower do not support cross-domain AJAX requests.</p>
|
|
<p>In addition, note that most <code>m.route</code> modes rely on <code>history.pushState</code> in order to allow moving from one page to another without a browser refresh. <a href="http://caniuse.com/#search=pushstate">IE9 and lower</a> do not support this feature and will gracefully degrade to page refreshes instead.</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> |