can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - Setup</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="../static/bundles/bit-docs-site/static.css"> <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/docs/images/canjs_favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="../../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="../../docs/images/canjs_favicon_72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="../../docs/images/canjs_favicon_114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../../docs/images/canjs_favicon_128x128.png"> <link rel="apple-touch-icon" sizes="144x144" href="../../docs/images/canjs_favicon_144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../../docs/images/canjs_favicon_152x152.png"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2302003-11', 'auto'); ga('send', 'pageview'); </script> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger"/> <label for="nav-trigger">Menu</label> <div id="everything"> <div id="left" class="column"> <div class="top-left"> <div class="brand"> <div class="logo"> <a href="../../index.html" alt="CanJS"></a> <div class="dropdown project-dropdown"> <a href="https://donejs.com/">DoneJS</a> <a href="http://stealjs.com/">StealJS</a> <a href="http://jquerypp.com/">jQuery ++</a> <a href="https://funcunit.com/">FuncUnit</a> <a href="http://documentjs.com/">DocumentJS</a> </div> </div> <div class="version"> <div class="version-number"> 3.0.0 </div> <div class="dropdown version-dropdown"> <a href="https://v2.canjs.com">2.3.27</a> </div> </div> </div> <div class="search-bar"> <p>   </p> </div> </div> <div class="bottom-left"> <div class="social-side-container"> <ul class="social-side"> <li> <a class="header-mobile github" href="https://github.com/canjs/canjs" target="_blank"><img class="social-icon-small" src="../../docs/images/github.png">Github</a> </li> <li> <a class="header-mobile twitter" href="https://twitter.com/canjs" target="_blank"><img class="social-icon-small" src="../../docs/images/twitter.png">Twitter</a> </li> </ul> <ul class="social-side"> <li> <a class="header-mobile" href="https://gitter.im/canjs/canjs" target="_blank">Chat</a> </li> <li> <a class="header-mobile" href="http://forums.donejs.com/c/canjs" target="_blank">Forum</a> </li> </ul> </div> <ul> <li class=" "> <a class="page" href="../guides/pmo/Components.html" title=""> Components </a> </li> <li class=" "> <a class="page" href="../guides/pmo/ApplicationDesign.html" title=""> Application Design </a> </li> <li class="current parent expanded"> <a class="page" href="Setup.html" title=""> Setup </a> </li> <li class=" "> <a class="page" href="../guides/pmo/Constructors.html" title=""> Constructors </a> </li> <li class=" "> <a class="page" href="../guides/pmo/TheDefinePlugin.html" title=""> The Define Plugin </a> </li> <li class=" "> <a class="page" href="../guides/pmo/StacheTemplates.html" title=""> Stache Templates </a> </li> <li class=" "> <a class="page" href="../guides/pmo/AppStateAndRouting.html" title=""> App State and Routing </a> </li> <li class=" "> <a class="page" href="../guides/pmo/Observables.html" title=""> Observables </a> </li> <li class=" "> <a class="page" href="../guides/pmo/ViewModels.html" title=""> View Models </a> </li> <li class=" "> <a class="page" href="../guides/pmo/DataModelsAndFixtures.html" title=""> Data Models and Fixtures </a> </li> <li class=" "> <a class="page" href="../guides/pmo/LoadingStates.html" title=""> Loading States </a> </li> <li class=" "> <a class="page" href="../guides/pmo/EventHandling.html" title=""> Event Handling </a> </li> <li class=" "> <a class="page" href="../guides/pmo/WebServiceCommunication.html" title=""> Web Service Communication </a> </li> <li class=" "> <a class="page" href="../guides/pmo/Recap.html" title=""> Recap </a> </li> </ul> </div> </div> <div id="right" class="column"> <div class="top-right"> <div class="top-right-top"> <ul class="top-right-bitovi"> <li class="dropdown"> <a href="http://bitovi.com" class="bitovi icon-bits">Bitovi</a> <ul class="dropdown-menu"> <li><a href="http://bitovi.com">Bitovi.com</a></li> <li><a href="http://bitovi.com/blog/">Blog</a></li> <li><a href="http://bitovi.com/consulting/">Consulting</a></li> <li><a href="http://bitovi.com/training/">Training</a></li> <li><a href="http://bitovi.com/open-source/">Open Source</a></li> </ul> </li> </ul> <div class="brand"> <div class="logo"> <a href="../../index.html" alt="CanJS"></a> </div> </div> <ul class="top-right-links"> <li> <a href="https://gitter.im/canjs/canjs">Chat</a> </li> <li> <a href="http://forums.donejs.com/c/canjs">Forum</a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/canjs" data-count-href="/canjs/canjs/stargazers" data-count-api="/repos/canjs/canjs#stargazers_count">Star</a> </li> <li> <a href="https://twitter.com/canjs" class="twitter-follow-button nav-social" data-show-count="true" data-show-screen-name="false">Follow @canjs</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </li> </ul> </div> <div class="breadcrumb"> <li><a href="../guides/pmo.html">Place My Order Guide</a></li> / <li><a href="Setup.html">Setup</a></li> <li class="breadcrumb-dropdown">/ <a> On this page</a> <ul class="on-this-page"></ul> </li> <div class="nav-toggle" title="Back to top"></div> </div> </div> <div class="bottom-right"> <article> <section class="title"> <div class="page-type"> <h1>Setup</h1> <div>page</div> </div> <section class="description"> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-links">  <li><a href="//github.com/canjs/canjs/tree/v3.0.0/docs/can-guides/experiment/pmo/setup.md">source</a></li>   </ul> </section> <section class="body"> <div class="getting-started"> <hr /> <p><strong>In this Chapter</strong></p> <ul> <li>Configuring and Downloading CanJS</li> <li>Recommended folder structure</li> <li>Applicaiton Bootstrap</li> </ul> <p>Get the code for: <a href="https://github.com/canjs/canjs/blob/minor/guides/examples/PlaceMyOrder/ch-1_canjs-getting-started.zip?raw=true">chapter 1</a></p> <hr /> <p>To begin, we’ll make sure we have everything we need to make our application. The first thing to do is get CanJS. The easiest way to get CanJS is to use the the custom download page, which allows you to download the specific parts of CanJS you need for your application.</p> <p>The custom download page loads with all the elements in the core CanJS library already selected. We want all of those in our build, so leave them checked. CanJS relies on an external core library for some of its functionality. The default option is jQuery; and that's what we’ll be working with here.</p> <p>The right side of the page lists all of the plugins. From the list of plugins, select the following:</p> <p><img src="../can/guides/images/setup/DownloadOptions.png" alt="CanJS plugins to select" /></p> <p>At the bottom of the page, click the download button. You'll be prompted to download a file called <code>can.custom.js</code>. Save that file to your local machine.</p> <p>You can access the custom download page here: <a href="../download.html" target="_blank">Custom downloader</a></p> <p>There is one additional file we need, which we won't download, yet. This file is special. You normally wouldn't want it to be a part of your final application, but it can be very helpful during development. The file is <code>can.fixture.js</code>. <a href="../docs/can.fixture.html">can.fixture</a> allows you to simulate RESTful services. We'll cover how to include <code>can.fixture</code> in the next chapter.</p> <p>In the next step, we’ll set up the application's folder structure, and move the <code>can.custom.js</code> file into its appropriate folder in the app.</p> <h2>Folder Structure</h2> <p>When building a CanJS app, because our application will be built using components, we use a component-based folder structure. This structure makes it easier to both manage the contents of the component and port the component, should you want to use it in another application.</p> <p>Off of a root folder called <code>PlaceMyOrder</code>, create the following subfolders:</p> <pre> └── PlaceMyOrder └── app ├── components ├── libs ├── models └── site_css </pre> <p>Copy the <a href="https://raw.githubusercontent.com/canjs/canjs/guides-overhaul/guides/examples/PlaceMyOrder/chapter_9/app/site_css/place_my_order.css" target="_blank">CSS file</a> that accompanies this guide into your <code>site_css</code> folder. We won't be covering any of the CSS here. Next, copy the <code>can.custom.js</code> file you downloaded in the previous step into the <code>libs</code> folder.</p> <p>Finally, you'll need to download the supporting libraries. They are:</p> <ul> <li><a href="http://jquery.com/download/" target="_blank">jQuery 2.x</a></li> <li><a href="http://canjs.com/release/2.1.4/can.fixture.js" target="_blank">can.fixture</a></li> </ul> <p>Once you've downloaded these files, rename the jQuery file to <code>jquery.js</code> and copy both files to the <code>libs</code> directory in your application folder.</p> <h2>index.html <a name="index-file"></a></h2> <p>Create a file called "index.html" in the app folder.</p> <pre> └── app └── index.html </pre> <p>It should look like this:</p> <pre><code class="language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="site_css/place_my_order.css"/> </head> <body>  <div id="can-app"></div> <script src="libs/jquery.js"></script> <script src="libs/can.custom.js"></script> <script src="libs/can.fixture.js"></script> <script src="app.js"></script> </body> </html> </code></pre> <p>At the bottom of the page, just before the body tag, are all of the script tags. We’re using the jQuery edition of CanJS, so the first script tag loaded must be jQuery. Following jQuery, we load <code>can.custom.js</code>.</p> <p>In the last chapter, we mentioned including <code>can.fixture.js</code>. In a normal project, once you connected to the actual REST services, you would remove <code>can.fixture.js</code>. In addition, to simplify things, we’re using the Bootstrap framework for our CSS; however Bootstrap is not required to use CanJS.</p> <h3>Base Template</h3> <p>Create a file in the <code>app</code> folder called <code>base_template.stache</code>. We'll edit the contents of that file as we build out our application. For now, you can leave it blank.</p> <h2>Application Bootstrap</h2> <p>The first script we need to create is the script that will bootstrap our application. Create a file in the app folder called <code>app.js</code>. Edit the file as follows:</p> <pre><code>$(function () { $('#can-app').html('The Requisite "Hello World" Message'); }); </code></pre> <p>If you open up your application in a browser, you should see:</p> <blockquote> <p>The Requisite "Hello World" Message</p> </blockquote> <p>At this point, we haven't done much. We aren't using CanJS at all yet. We’re just using jQuery to set the HTML contents of a DOM element.</p> <p>So, how do we get the application to actually <em>do something</em>? Building apps with CanJS centers around building can.Components, read on to the next chapter to learn more.</p> <hr /> <p><span class="pull-left"><a href="Tutorial.html">&lsaquo; Getting Started</a></span> <span class="pull-right"><a href="ApplicationFoundations.html">Application Foundations &rsaquo;</a></span></p> </div> </section> <script type="text/javascript"> var docObject = {"src":{"path":"docs/can-guides/experiment/pmo/setup.md"},"description":"\n","name":"pmo/Setup","title":"Setup","type":"page","parent":"guides/pmo","order":2,"disabletableofcontents":true,"comment":" ","pathToRoot":"../.."}; </script> </article> <footer><p>CanJS is part of <a href="http://donejs.com" target="_blank">DoneJS</a>. Created and maintained by the core <a href="https://donejs.com/About.html#section=section_Team" target="_blank">DoneJS team</a> and <a href="http://bitovi.com" target="_blank">Bitovi</a>. <strong>Currently 3.0.0.</strong></p></footer> </div> </div> </div> <script> steal = { instantiated: { "bundles/bit-docs-site/static.css!$css" : null } }; </script> <script type='text/javascript' data-main="bit-docs-site/static" src="../static/node_modules/steal/steal.production.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script> </body> </html>