How to use Jade client-side

jade_usage.js

window.Jade = require('jade');

JadeTemplates = {};

JadeTemplates["some_template"] = Jade.compile("li.feedback.exercise_item.checkbox\n  input(type=\"hidden\", name=\"exercise[feedback_items_attributes][$order][_type]\", value=\"Checkbox\")\n\n  - if (this.is_editing)\n    != partial(\"item_actions\")\n\n  .body\n    .checkbox\n      input(type=\"checkbox\", disabled, checked)\n\n    .title\n      - if (this.is_editing)\n        input(name=\"exercise[feedback_items_attributes][$order][title]\", value=this.title, placeholder=\"E.g. "I completed this exercise"\", \"data-bvalidator\"=\"required\")\n\n      - if (this.is_viewing)\n        label= this.title\n");

JadeTemplates["exercises/_Image"] = Jade.compile("a.image(href=this.file_url)\n\timg(src=this.file_thumb_url)\n");


// defines the helpers "exercise_item" and "partial"
JadeHelpers = {
  exercise_item: function(mode, item) {
    var template;
    template = Templates("exercises/_" + item._type);
    item = _.clone(item);
    item.mode = mode;
    item["is_" + mode] = true;
    return template(item);
  },

  partial: function(name) {
    return renderTemplate("exercises/_" + name)();
  }
};

// renders a template
renderTemplate = function(name, scope) {
  return JadeTemplates[name].call(scope, JadeHelpers);
};


// TO RENDER
renderTemplate("exercises/_Image", image) //image is assigned to "this" in the template