<input type="text" placeholder="Please input something..." data-schema-model="message" data-schema-value="Hello world!" data-schema-adapter="escape" data-schema-trigger="keyup">
<div class="ui-content-alert ui-text-invisible" data-schema-view="message" data-schema-controller="encrypt">
  <p>Message: <strong>${message}</strong></p>
  <p>Encrypt: <span data-schema-view="icons" data-schema-iteration="icon of icons"><i data-schema-icon="${icon}"></i></span></p>
  <p>Count: <code>${count}</code></p>
</div>

<script>
  schema.escape = function (message) {
    return message.replace(/\</g, '&lt;').replace(/\>/g, '&gt;');
  };

  schema.encrypt = function (models) {
    var message = models.message || '';
    var emoji = {
      'A': 'angry',
      'B': 'baffled',
      'C': 'confused',
      'D': 'sad',
      'E': 'evil',
      'F': 'frustrated',
      'G': 'grin',
      'H': 'happy',
      'I': 'hipster',
      'J': 'cool',
      'K': 'wink',
      'L': 'sleepy',
      'M': 'smile',
      'N': 'neutral',
      'O': 'confused',
      'P': 'happy',
      'Q': 'cool',
      'R': 'crying',
      'S': 'sad',
      'T': 'tongue',
      'U': 'frustrated',
      'V': 'evil',
      'W': 'wink',
      'X': 'shocked',
      'Y': 'crying',
      'Z': 'shocked'
    };
    var icons = message.split('').map(function (char) {
      if (/[A-Z]/.test(char)) {
        return emoji[char];
      }
      if (/[a-z]/.test(char)) {
        return emoji[char.toUpperCase()] + '-o';
      }
      return char.charCodeAt(0) < 128 ? 'wondering' : 'wondering-o';
    });
    return {
      icons: icons,
      count: message.length
    };
  };
</script>