110 lines
No EOL
5.4 KiB
HTML
110 lines
No EOL
5.4 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="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="compiling-templates">Compiling Templates</h2>
|
|
<p>If performance is absolutely critical, you can optionally pre-compile templates that use <code>m()</code> by running the <a href="tools/template-compiler.sjs"><code>template-compiler.sjs</code></a> macro with <a href="https://github.com/mozilla/sweet.js">Sweet.js</a></p>
|
|
<p>Compiling a template transforms the nested function calls into a raw virtual DOM tree (which is merely a collection of native Javascript objects that is ready to be rendered via <a href="mithril.render.html"><code>m.render</code></a>)</p>
|
|
<p>For example, given the following template:</p>
|
|
<pre><code class="lang-javascript">var view = function() {
|
|
return m("a", {href: "http://google.com"}, "test");
|
|
}</code></pre>
|
|
<p>It would be compiled into:</p>
|
|
<pre><code class="lang-javascript">var view = function() {
|
|
return {tag: "a", attrs: {href: "http://google.com"}, children: "test"};
|
|
}</code></pre>
|
|
<p>Note that compiled templates are meant to be generated by an automated build process and are not meant to be human editable.</p>
|
|
<hr>
|
|
<h3 id="installing-nodejs-and-sweetjs-for-one-off-compilations">Installing NodeJS and SweetJS for one-off compilations</h3>
|
|
<p>SweetJS requires a <a href="http://nodejs.org">NodeJS</a> environment. To install it, go to its website and use the installer provided.</p>
|
|
<p>To install SweetJS, NodeJS provides a command-line package manager tool. In a command line, type:</p>
|
|
<pre><code>npm install -g sweet.js</code></pre>
|
|
<p>To compile a file, type:</p>
|
|
<pre><code>sjs --module /mithril.compile.sjs --output <output-filename>.js <input-filename>.js</code></pre>
|
|
<hr>
|
|
<h3 id="automating-compilation">Automating Compilation</h3>
|
|
<p>If you want to automate compilation, you can use <a href="http://gruntjs.com">GruntJS</a>, a task automation tool. If you're not familiar with GruntJS, you can find a tutorial on their website.</p>
|
|
<p>Assuming NodeJS is already installed, run the following command to install GruntJS:</p>
|
|
<pre><code>npm install -g grunt-cli</code></pre>
|
|
<p>Once installed, create two files in the root of your project, <code>package.json</code> and <code>Gruntfile.js</code></p>
|
|
<p><code>package.json</code></p>
|
|
<pre><code class="lang-javascript">{
|
|
"name": "project-name-goes-here",
|
|
"version": "0.0.0", //must follow this format
|
|
"devDependencies": {
|
|
"grunt-sweet.js": "*"
|
|
}
|
|
}</code></pre>
|
|
<p><code>Gruntfile.js</code></p>
|
|
<pre><code class="lang-javascript">module.exports = function(grunt) {
|
|
grunt.initConfig({
|
|
sweetjs: {
|
|
modules: ["mithril.compile.sjs"],
|
|
compile: {expand: true, cwd: ".", src: "**/*.js", dest: "destination-folder-goes-here/"}
|
|
}
|
|
});
|
|
|
|
grunt.loadNpmTasks('grunt-sweet.js');
|
|
|
|
grunt.registerTask('default', ['sweetjs']);
|
|
}</code></pre>
|
|
<p>Make sure to replace the <code>project-name-goes-here</code> and <code>destination-folder-goes-here</code> placeholders with appropriate values.</p>
|
|
<p>To run the automation task, run the following command from the root folder of your project:</p>
|
|
<pre><code>grunt</code></pre>
|
|
<p>More documentation on the grunt-sweet.js task and its options <a href="https://github.com/natefaubion/grunt-sweet.js">can be found here</a></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> |