title: Using JS In Handlebars
body: <p>I am using handlebars for templating on a simple mobile webpage with <a href="http://swipejs.com/" rel="nofollow noreferrer">swipejs</a>.  I made a prototype of the webpage without the templating engine and it worked great.  I then researched the web for a good templating engine and found handlebars.</p>
  <p>I embedded the body of my webpage into a script tag, so handlebars can work.  Everything works fine except swipejs (which I'm using for images).</p>
  <p>Here's a summarized version of my HTMl:</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=no&quot; /&gt;
      
      &lt;link media=&quot;Screen&quot; href=&quot;styles.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; /&gt;
      &lt;link media=&quot;handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)&quot; href=&quot;css/mobile.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; /&gt;
  
      &lt;script src=&quot;scripts/jquery.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;scripts/handlebars.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;scripts/app.js&quot;&gt;&lt;/script&gt;
      &lt;script src='scripts/swipe.js'&gt;&lt;/script&gt;
      &lt;!--[if IEMobile]&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;mobile.css&quot; media=&quot;screen&quot; /&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script id=&quot;description-script&quot; type=&quot;text/x-handlebars-template&quot;&gt;
      &lt;h1&gt;Main Title&lt;/h1&gt;
      &lt;div id=&quot;pictures&quot;&gt;
          &lt;div id=&quot;slider&quot; class=&quot;swipe&quot;&gt;
              &lt;div class=&quot;swipe-wrap&quot;&gt;
                  &lt;div&gt;&lt;center&gt;&lt;img style=&quot;width:95%;height:auto;&quot; src=&quot;image link 1&quot;/&gt;&lt;/center&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;center&gt;&lt;img style=&quot;width:95%;height:auto;&quot; src=&quot;image link 2&quot;/&gt;&lt;/center&gt;&lt;/div&gt;
                  &lt;div&gt;&lt;center&gt;&lt;img style=&quot;width:95%;height:auto;&quot; src=&quot;image link 3&quot;/&gt;&lt;/center&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;h2&gt;Description&lt;/h2&gt;
          &lt;div id=&quot;description&quot;&gt;
              {{description}}
      &lt;/div&gt;
  &lt;/script&gt;
  &lt;script&gt;
              //swipe script
      window.mySwipe = Swipe(document.getElementById('slider'),
      {
          auto: 3000,
          speed: 300
      });
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Thank you in advance for the help.  Will I have to use a different templating engine or is there something in here that I'm forgetting?</p>