title: Sammy.js and Knockout.js => Templating without templates?
body: <p>I am fairly new to the concept of javascript client side development.  I am running into an issue, though it may be I just don't understand how to accomplish something with the mash of frameworks.</p>
  
  <p>I know I want to use Knockout for it's rich client side goodies.  I also wanna use Sammy.js to allow for routing and passing data to the knockout views (I come from an MVC background where I stuff a model with data, then return view(model), and MVC binds it nice and good for me).</p>
  
  <p>So now I am trying to do something similar client side...</p>
  
  <p>Here is my Index.html :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /&gt;
      &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"/&gt;
  
      &lt;title&gt;The EClassifieds Mobile&lt;/title&gt;
  
  
  
        &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;!--      &lt;script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"&gt;&lt;/script&gt;--&gt;
        &lt;script type="text/javascript" charset="utf-8" src="./scripts/cordova-1.8.1.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" charset="utf-8" src="./scripts/knockout.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" charset="utf-8" src="./scripts/templ.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" charset="utf-8" src="./scripts/sammy.js"&gt;&lt;/script&gt;      
        &lt;script type="text/javascript" charset="utf-8" src="./scripts/sammy.tmpl.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" charset="utf-8" src="./services/RouteManager.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" charset="utf-8" src="./services/ApplicationManager.js"&gt;&lt;/script&gt;
  
  
         &lt;link rel="stylesheet" href="./style/site.css" type="text/css" media="screen" title="no title" charset="utf-8"/&gt;       
   &lt;!--      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /&gt;--&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
    &lt;div id="main"&gt;
    &lt;h1&gt;HELLO WORLD!&lt;/h1&gt;
      &lt;!--Sammy should update the content of this div dynamically, creating a SPA (single page application)--&gt;
    &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my Sammy Configuration.</p>
  
  <pre><code>(function ($) {
  
      alert('Building Routes');
      var app = $.sammy('#main', function () {
          this.use('Tmpl', 'html'); 
          this.get('#/', function (context) {
              alert('Rendering Partial for Login page');
              context.app.swap('Loading...');
              this.render("/views/Login.html");
          });
  
      });
  
      $(function () {
          app.run('#/');
      });
  
  })(jQuery);
  </code></pre>
  
  <p>Here is my Login.html</p>
  
  <pre><code> &lt;!--Model File Goes Here --&gt;
      &lt;script type="text/javascript" charset="utf-8" src="../models/Login.js"&gt;&lt;/script&gt;
  
       &lt;fieldset title="Please Login to Begin :"&gt;
  
              &lt;div data-role="content" style="padding: 15px"&gt;
                  &lt;div data-role="fieldcontain"&gt;
                      &lt;fieldset data-role="controlgroup" data-mini="true"&gt;
                          &lt;label for="txtUsername"&gt;
                              Username
                          &lt;/label&gt;
                          &lt;input id="txtUsername" data-bind="value: username" placeholder="Stevie" value="" type="text" /&gt;
                      &lt;/fieldset&gt;
                  &lt;/div&gt;
                  &lt;div data-role="fieldcontain"&gt;
                      &lt;fieldset data-role="controlgroup" data-mini="true"&gt;
                          &lt;label for="txtPassword"&gt;
                              Password
                          &lt;/label&gt;
                          &lt;input id="txtPassword" data-bind="value: password" placeholder="yep!" value="" type="password" /&gt;
                      &lt;/fieldset&gt;
                  &lt;/div&gt;
                  &lt;a id="btnLogin" data-role="button" data-transition="fade" href="#page1" &gt;
                      Login
                  &lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div id="errorText"&gt;
                  &lt;h1&gt;&lt;/h1&gt;            
              &lt;/div&gt;
  
            &lt;p id="deviceProperties"&gt;Loading device properties...&lt;/p&gt;
  
      &lt;/fieldset&gt;
  
   &lt;script type="text/javascript"&gt;
        $(document).ready(function () {
                ko.applyBindings(new LoginDataModel(0, "Stevie", "theTV", true));
  
            });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I also need some way to pass the data from the sammy get handler, to the knockout page.  Is there a way to do this, or am I attempting the impossible?</p>
  
  <hr>
  
  <p>UPDATE 1 :
    I would really love to be able to do something like :</p>
  
  <pre><code>  var app = $.sammy('#main', function () {
              this.use('Tmpl', 'html'); 
              this.get('#/', function (context) {
                  alert('Rendering Partial for Login page');
                  context.app.swap('Loading...');
                  var data = getLoginData();
                  this.render("/views/Login.html", data);
              });
  </code></pre>
  
  <p>Sammy does this same exact thing using other template frameworks, however, I don't see how I would bind the $data in the Knockout view to the data passed from Sammy.</p>