requirejs-dustjs/vendor/requirejs/docs/start.html

A requirejs plugin for loading and compiling dustjs templates.

<div id="directory" class="section">
    <h1>How to get started with RequireJS</h1>

    <ul class="index mono">
        <li class="hbox">
            <a href="#get">Get RequireJS</a><span class="spacer boxFlex"></span><span class="sect">&sect; 1</span>
        </li>
        <li class="hbox">
            <a href="#add">Add RequireJS</a><span class="spacer boxFlex"></span><span class="sect">&sect; 2</span>
        </li>
        <li class="hbox">
            <a href="#optimize">Optimize</a><span class="spacer boxFlex"></span><span class="sect">&sect; 3</span>
        </li>
    </ul>

    <span class="note">Note: If you are using jQuery, there is a <a href="jquery.md">targeted jQuery tutorial</a></span>
</div>

<div class="section">
<h2>
    <a name="get">Get RequireJS</a>
    <span class="sectionMark">&sect; 1</span>
</h2>

<p>Go to the <a href="download.md">download</a> page and get the file.</p>
</div>

<div class="section">
<h2>
    <a name="add">Add RequireJS</a>
    <span class="sectionMark">&sect; 2</span>
</h2>

<span class="note">Note: For jQuery-specific advice, see the <a href="jquery.html">jQuery integration page</a></span>

<p>This setup assumes you keep all your JavaScript files in a "scripts" directory in your project. For example, if you have a project that has an project.html page, with some scripts, the directory layout might look like so:</p>

<ul>
    <li>project-directory/
    <ul>
        <li>project.html</li>
        <li>scripts/
        <ul>
            <li>main.js</li>
            <li>helper/
            <ul>
                <li>util.js</li>
            </ul></li>
        </ul></li>
    </ul></li>
</ul>

<p>Add require.js to the scripts directory, so it looks like so:</p>

<ul>
    <li>project-directory/
    <ul>
        <li>project.html</li>
        <li>scripts/
        <ul>
            <li>main.js</li>
            <li>require.js</li>
            <li>helper/
            <ul>
                <li>util.js</li>
            </ul></li>
        </ul></li>
    </ul></li>
</ul>

<p>To take full advantage of the optimization tool, it is suggested that you keep all inline script out of the HTML, and only reference require.js with a require call like so to load your script:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;My Sample Project&lt;/title&gt;
        &lt;!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. --&gt;
        &lt;script data-main="scripts/main" src="scripts/require.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;My Sample Project&lt;/h1&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Inside of main.js, you can use require() to load any other scripts you need to run. This ensures a single entry point, since <a href="api.html#data-main">the data-main script you specify is loaded asynchronously</a>.</p>

<pre><code>require(["helper/util"], function(util) {
    //This function is called when scripts/helper/util.js is loaded.
    //If util.js calls define(), then this function is not fired until
    //util's dependencies have loaded, and the util argument will hold
    //the module value for "helper/util".
});
</code></pre>

<p>That will load the helper/util.js script. To get full advantage of RequireJS,
see the <a href="api.html">API docs</a> to learn more about defining and using
modules.</p>

</div>

<div class="section">
<h2>
    <a name="optimize">Optimize</a>
    <span class="sectionMark">&sect; 3</span>
</h2>

<p>Once you are finished doing development and want to deploy your code for your end users, you can use the <a href="optimization.md">optimizer</a> to combine the JavaScript files together and minify it. In the example above, it can combine main.js and helper/util.js into one file and minify the result.</p>
</div>