Knockout.js view

A sample router action.js

// The backbone router process the url and then calls a function. Here's one of the functions.
// NOTE: Unit.fetch, Course.fetch, Unit.fetch methods are all functions which take params, makes an ajax call, then takes the data and creates a new model and returns it. E.g. $.ajax({...}, function(){ new User(data) })

    ,show_unit: function(username, course_slug, id){

        User.fetch(current_user.username, function(user){
            App.VMs.current_user(user)
            Course.fetch(username, course_slug, function(course){
                App.VMs.course(course)
                Unit.fetch(options, function(unit){
                    App.VMs.unit(unit)
                    App.VMs.global.mainTemplate('show_course') 
                })
            })
        })
    }

gistfile1.html

      <!-- / *********************** --> 
      <!-- / SHOW COURSE --> 
      <!-- / *********************** --> 
      <script id='show_course' type='text/html'> 
        <div class='head courseHeader large' data-bind='visible : unit().id() === course().root_unit_id()'>
          <div class='line'>
            <div class='banner_image large'>
              <a data-bind="attr : {href : '#!/' + course().username() + '/' + course().slug()}">
                <img src='images/default_banner.png'>
              </a>
            </div>
            <div class='banner_text large'>
              <a class='banner_subtitle' data-bind="attr: { href: '#!/' + course().username()}, text: course().username()"></a>
              <a class='nested_editable' data-bind="attr : {href : '#!/' + course().username() + '/' + course().slug()}">
                <span class='banner_title' contenteditable data-bind='htmlValue : course().title'></span>
              </a>
            </div>
          </div>
        </div>
        <div class='head courseHeader small' data-bind='visible : unit().id() !== course().root_unit_id()'>
          <div class='line'>
            <div class='banner_image small'>
              <a data-bind="attr : {href : '#!/' + course().username() + '/' + course().slug()}">
                <img src='images/small_default_banner.png'>
              </a>
            </div>
            <div class='banner_text small'>
              <a class='banner_subtitle_small' data-bind="attr: { href: '#!/' + course().username()}, text: course().username()"></a>
              <a class='nested_editable' data-bind="attr : {href : '#!/' + course().username() + '/' + course().slug()}">
                <span class='banner_title_small' contenteditable data-bind='htmlValue : course().title'></span>
              </a>
            </div>
          </div>
        </div>
        <div class='body'>
          <div class='main'>
            <div data-bind="template : 'show_unit'"></div>
          </div>
        </div>
      </script> 
      <!-- / *********************** --> 
      <!-- / SHOW UNIT --> 
      <!-- / *********************** --> 
      <script id='show_unit' type='text/html'> 
        <div class='body'>
          <section class='main'>
            <header class='unit_header_block' data-bind='visible : unit().id() !== course().root_unit_id()'>
              <p>
                <span class='depth_position'>
                  <span class='unit_depth_label' data-bind='text: unit().depth_label'></span>
                  <span class='unit_position' data-bind='text: unit().position'></span>
                </span>
              </p>
              <p class='unit_title' contenteditable='true' data-bind='htmlValue: unit().title'></p>
              <p class='unit_subtitle' contenteditable data-bind='htmlValue: unit().subtitle'></p>
            </header>
            <p class='unit_text' contenteditable='true' data-bind='RTE: unit().text'></p>
            <p class='unit_heading' data-bind='text: unit().childrens_depth_label'></p>
            <ol class='big_list' data-bind="visible: unit().nested_children() == true, template :{name : 'show_unit_nested', foreach: unit().units ,  templateOptions : { subParent : unit().units } }, sortableList: unit().units"></ol>
            <p class='add_unit' data-bind='click: function(){unit().addChild()}'>Add Unit</p>
          </section>
        </div>
      </script> 

      <!-- / *********************** --> 
      <!-- / SHOW UNIT NESTED --> 
      <!-- / *********************** --> 


      <script id='show_unit_nested' type='text/html'> 
        <li class='mod modAccordion'>
          <!-- / .mod.modAccordion.modNestedUnit -->
          <div class='inner'>
            <div class='hd'>
              <div class='icon_wrapper'>
                <span class='icon accordion_icon'></span>
              </div>
              <div class='text_wrapper'>
                <span class='move'>move</span>
                <p class='nested_heading' contenteditable data-bind='htmlValue: $data.title'></p>
                <p class='nested_subheading' contenteditable data-bind='htmlValue: $data.subtitle'></p>
              </div>
            </div>
            <div class='bd accordion resource'>
              <p class='nested_text' contenteditable data-bind='htmlValue: $data.text'></p>
            </div>
          </div>
        </li>
      </script> 

My view models....js

var App = {
    VMs : {
        global : {
            mainTemplate : ko.observable()
        }
        ,unit : ko.observable()
        ,course : ko.observable()
        ,user : ko.observable()
        ,current_user : ko.observable()
    } 
    ,trackers :  {}
    ,init: function() {
        new App.Router();
        Backbone.history.start();
        ko.applyBindings(App.VMs)
    }
}

// On document load, I initialize the app:

    $(function() {
      App.init();
    });