The beginning of a proper mockup-driven template language
JavaScript
Switch branches/tags
Nothing to show
Latest commit 741b9d3 Apr 20, 2013 @judofyr Cleanup:
- Fix some minor bugs
- Add more comments
- Fix example
Permalink
Failed to load latest commit information.
example Cleanup: Apr 20, 2013
README.md Update README about external config Dec 11, 2011
mockie.js Cleanup: Apr 20, 2013
mockie.min.js Cleanup: Apr 20, 2013

README.md

Mockie

Mockie is a little framework that gives you simple cross-site requests in static HTML files. This is especially convenient when you're opening the files outside of a server (i.e. file://) because of the strict cross-site rules which Mockie circumvents.

Just to make it clear: Mockie uses no AJAX, HTML5, Flash, Silverlight, ActiveX or any funky stuff. It just creates some iframes and passes around data in JSON format. Nothing that wasn't possible ten years ago.

Mockie does not belong in production code, but can rather be used to implement partials and layouts which works no matter where the files are located.

Implementing a simple partial system

To show how you can use Mockie, we're going to implement a simple partial system. More specifically, we have two files:

index.html

<script src="partial.js"></script>
<body>
  <h1>Hello</h2>
  <include file="world.html"></include>
</body>

world.html

<script src="partial.js"></script>
<body>
  <h2>World</h2>
</body>

When opening index.html we expect the browser to automatically include the world.html file for us (with no server processing needed).

partial.js

Because we want everything in one file, we're going to copy mockie.js and append our own code there:

/* Lots of mockie.js stuff */

// We're going to expose a function that we can call on any file which
// also includes this script file.
Mockie.expose({
  fetchBody: function(done) {
    window.onload = function() {
      done(document.body.innerHTML);
    }
  },
});

window.onload = function() {
  var includes = document.getElementsByTagName('include');
  var forEach = Array.prototype.forEach;
  forEach.call(includes, function(inc) {
    // Figure out which file we're going to include
    var file = inc.getAttribute('file');
    // Run the fetchBody-method in the file
    Mockie.request(file, 'fetchBody', function(html) {
      // Insert the content right after the <include>-tag
      inc.insertAdjacentHTML('afterend', html);
      // Remove the <include>-tag
      inc.parentElement.removeChild(inc);
    });
  });
};

And that's all there is to it!

Configuration

Mockie also let's you define configuration in your files:

<script src="mockie.js">
  { "hello": "world" }
</script>

This JSON structure is available as Mockle.config.

If you need to fetch the configuration from another file, just expose a function:

Mockie.expose({
  fetchConfig: function(done) { done(Mockie.config) }
});

Mockie.request('file.html', 'fetchConfig', function(cfg) {
  console.log(cfg);
});