Mura.js - Mura Docs v7.1

Mura.js

Mura.js originally began as a lightweight utility to decouple Mura's dependency on jQuery, a popular JavaScript library. Since its inception, Mura.js has also grown into a JavaScript framework for interacting with Mura's JSON API, which allows Mura CMS to be the main content creation hub within an organization, and allows developers to build their applications as pure JavaScript clients.

Mura.js is hosted as a completely separate project on Github as of Mura v7.1. You can view and/or contribute at https://github.com/blueriver/MuraJS.

In addition, Mura.js has been added as a package to the npmjs registry. Instructions and examples on how to work with the npm pacakge can be found at https://www.npmjs.com/package/mura.js.

Familiar Syntax

If you've ever used jQuery, you'll find the syntax quite familiar.

Selecting Elements

The example below illustrates how to use Mura.js to select multiple DOM elements with the same class, and replace the content of each of the selected elements with custom HTML.

<script>
Mura(function(m) {
  m('.target').each(function() {
    m(this).html('Mura found you!');
  });
});
</script>

Ajax Support

Mura.js includes baked-in Ajax (asynchronous JavaScript and XML) support. The example below illustrates how to perform a simple Ajax request.

<script>
Mura.ajax({
  type: 'post',
  url: 'https://domain.com/path/',
  data: { key: value },
  success: function(resp) {
    console.log(resp);
  },
  error: function(resp) {
    console.log(resp);
  }
});
</script>

Promise Support

Mura.js also includes support for JavaScript promises. See the following examples for more details.

Mura.post() With Promises

<script>
Mura.post('https://domain.com/path/', { key: 'value' })
  .then(function(result) {
    // handle success
   })
  .catch(function(err) {
    // handle error
  };
</script>

Mura.get() With Promises

<script>
Mura.get('https://domain.com/path/')
  .then(function(result) { 
    // success
    // do something with the result
    Mura('#target').html(result.data.html);
  })
  .catch(function(err) { 
    // handle error
    console.log(err);
  });
</script>

Chaining Promises

The following example illustrates how you could handle multiple Ajax requests with Mura.js using JavaScript Promises chaining, and avoid the "pyramid of doom". In other words, avoid nesting your Ajax requests.

<script>
var exampleFunc1 = function() {
    return new Promise(function (resolve, reject) {
        Mura.post('https://domain.com/path/', { apikey: 'value' })
            .then(function(result) {
                if ( result.hasOwnProperty('id') ) {
                    resolve(result);
                } else {
                    reject('result does not contain an id');
                }
            })
            .catch(function(err) {
                reject(err);
            });
    });
};
 
var exampleFunc2 = function(id) {
    return new Promise(function (resolve, reject) {
        Mura.get('https://domain.com/path/?id=' + id)
            .then(function(result) {
                resolve(result);
            })
            .catch(function(err) {
                reject(err);
            });
    });
};
 
exampleFunc1()
    .then(function(exampleFunc1Result) {
        return exampleFunc2(exampleFunc1Result.id);
    })
    .then(function(result) {
        console.log(result);
    })
    .catch(function(err) {
        console.log(err);
    });
</script>

DOM Event Handlers

Mura.js allows for registering DOM event handlers, as shown in the example below.

<script>
Mura('#mybutton').on('click', function(e) {
  e.preventDefault();
  console.log(e);
});
</script>

You can also register multiple event handlers using a custom "addEventHandler" method, as shown below.

<script>
Mura('.myclass').addEventHandler({
  click: function(e) {
    e.preventDefault();
    console.log(e);
  }
  , touch: function(e) {
    // do something
    console.log(e);
  }
});
</script>

Mura.DOMSelection Class

The DOM selection methods available via Mura.js is handled by the Mura.DOMSelection class. This wraps your selected targets via the Mura() method.

Mura.js allows you to handle selected DOM elements as a single object, or as a collection.

Single Object Example
Mura('#target')
  .html('Hello world!');
Collection Example
Mura('.target')
  .each(function() {
    Mura(this)
      .html('Hello world!');
  });

Supported DOMSelection methods may be found at https://github.com/blueriver/MuraJS/blob/master/src/core/domselection.js.