Knockout Bookmarklet template, w/ html template loading

main.js

// You create your bookmarklet by instantiating
// a new Bookmarklet function, then pass in the options like so.
// This example checks to see if the var is already defined, and makes
// sure not to overwrite it. This could happen if the user clicks on
// the bookmarklet more than once.
(function(global) {

global.Doublestock = new Bookmarklet({
  css: [
    'css/styles.css'
  ],
  js: [
    'js/vendor/knockout.js',
    'js/vendor/ko-string-templates.js'
  ],
  html: [
    'templates/bookmarklet.html'
  ],

  // jqpath: '/my/jquery.js', // defaults to google cdn-hosted jquery
  main: function() { // use base to expose a public method
    var el = $('<div>', {id: 'Doublestock'})
      .append(ko.templates['templates/bookmarklet.html']);

    var Model = function() {

    };

    var ViewModel = function(model) {
      this.title = ko.observable();

      this.init(model);
    };

    $.extend(ViewModel.prototype, {
      init: function(model) {
        this.title('stuff');
      }
    });

    el.appendTo('body');
    ko.applyBindings(new ViewModel(new Model()), el.get(0));
  }
});


/**
 * jQuery Bookmarklet - version 2.0
 * Author(s): Brett Barros, Paul Irish, Jon Jaques
 *
 * Original Source: http://latentmotion.com/how-to-create-a-jquery-bookmarklet/
 * Modified Source: https://gist.github.com/2897748
 */

function Bookmarklet(options){

  var self = this;

  // Simple merge
  var extend = function(a, b){
    var c = {};
    for (var key in a) { c[key] = a[key]; }
    for (var key in b) { c[key] = b[key]; }
    return c;
  };

  var defaults = {
      cachebuster: false
    , baseUrl: ''
    , css: []
    , js: []
    , jqPath: "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"
    , main: function() {}
  };

  // If we don't pass options, use the defaults.
  var o = extend(defaults, options);

  var cachebuster = o.cachebuster ? ('?v=' + (new Date()).getTime()) : '';

  var loadCSS = function(sheets) {
    // Synchronous loop for css files
    $.each(sheets, function(i, sheet){
      $('<link>').attr({
        href: (o.baseUrl + sheet + cachebuster),
        rel: 'stylesheet'
      }).appendTo('head');
    });
  };

  var loadJS = function(scripts) {
    // Check if we've processed all
    // of the JS files (or if there are none).
    //console.log(scripts.length, typeof scripts)
    if (scripts.length === 0) {
      loadHtml(o.html, o.main);
      return;
    }
    // Load the first js file in the array.
    $.getScript(o.baseUrl + scripts[0] + cachebuster, function() {
        // asyncronous recursion, courtesy Paul Irish.
        loadJS(scripts.slice(1));
    });
  };

  var loadHtml = function(templates, callback) {
    if (templates.length === 0) {
      callback();
      return;
    }
    $.get(o.baseUrl + templates[0] + cachebuster, function(template) {
      ko.templates[templates[0]] = template;
      loadHtml(templates.slice(1), callback);
    });
  }

  var init = function(callback) {
    if(!window.jQuery) {
      // Create jQuery script element.
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = o.jqPath;
      document.body.appendChild(script);

      // exit on jQuery load.
      script.onload = function(){ callback(); };
      script.onreadystatechange = function() {
        if (this.readyState == 'complete') callback();
      }
    } else {
      callback();
    }
  };


  // Kick it off.
  init(function(){
    loadCSS(o.css);
    loadJS(o.js);
  });

};

}).call(this, window);