<!DOCTYPE html>
<html>
  <head>
    <script src="http://noder-js.ariatemplates.com/dist/v1.5.0/noder.dev.js" type="text/javascript">
    {
      packaging: {
        preprocessors: [{
          pattern: /\.hsp$/,
          module: "hsp/compiler/compile"
        }, {
          pattern: /\.js$/,
          module: "hsp/transpiler/transpile"
        }]
      }
    }
    </script>
    <script src="http://hashspace.ariatemplates.com/dist/0.0.4/hashspace-noder.js" type="text/javascript"></script>
    <script src="http://hashspace.ariatemplates.com/dist/0.0.4/hashspace-noder-compiler.js" type="text/javascript"></script>
    <script type="application/x-noder">
        var Hello = require('./hello.hsp');
        Hello({name:"World"}).render("output");
    </script>
  </head>
  <body>
    <div id="output"></div>
  </body>
</html>
var klass = require("hsp/klass");

var HelloCtrl = klass({
    attributes: {
        "name" : { type : "string" }
    },
    clear : function () {
        this.name = "";
    }
});

module.exports = HelloCtrl;
var HelloCtrl = require("./HelloCtrl");

{template Hello using ctrl:HelloCtrl}
   <p>Hello, {ctrl.name}!</p>

   <input model="{ctrl.name}">
   <button onclick="{ctrl.clear()}">Clear</button>
{/template}

module.exports = Hello;