withTemplate flight mixin

template.xml

<root>
  <template id="main">
    <style type="text/css">                                                                                       
      @font-face {                                                                                                
      font-family: "Inconsolata";                                                                                 
      font-style: normal;                                                                                         
      font-weight: normal;                                                                                        
      src: local("Inconsolata"), url("Inconsolata.woff") format("woff");                                          
      }                                                                                                           
      .terminal {                                                                                                 
      font-family: Inconsolata, monospace;                                                                        
      color: green;                                                                                               
      background: black;                                                                                          
      opacity:0.6;                                                                                                
      filter:alpha(opacity=60);                                                                                   
      height: 100%;                                                                                               
      min-height: 100%;                                                                                           
      width: 100%;                                                                                                
      }                                                                                                           
      .fill-height {                                                                                              
      height: 100%;                                                                                               
      }                                                                                                           
      .fill-width {                                                                                               
      width: 100%;                                                                                                
      }                                                                                                           
      .header {                                                                                                   
      list-style: none;                                                                                           
      background-color: none;                                                                                     
      padding: 8px 15px;                                                                                          
      }                                                                                                           
    </style>
    <div id="box" class="fill-height fill-width">
      <div id="header" class="header">
        <a href="#"><span class="label label-success">Bookmark</span></a>
      </div>
      <div id="content" class="terminal"></div>
      <div>
        <input id="input" style="color: white; background: black; width: 100%;"
               type="text" placeholder="{{ prompt }}"></input>
      </div>
    </div>
  </template>

  <template id="tbd">
  </template>
</root>

terminal.js

"use strict";

define(
  [
    'lib/flight/lib/component',
    'components/mixins/withTemplate',
    'components/mixins/withMedia',
    'components/mixins/withAudio'
  ],
  function(component, withTemplate, withMedia, withAudio) {
    var self;

    function terminal() {
      this.defaultAttrs({
        media_files_: [
          'media/beep.mp3',
          'media/map.png'
        ],
        template_vars_ : {
          main: {
            prompt: 'bash> '
          }
        }
      });

      this.after('media_loaded', function() {
        this.sound_prepare_(this.attr.media_.beep, function(id) {
          self.sound_play_(id, false);
        });

        $('body').css("background-image",
          "url(data:image/png;base64,"+self.attr.media_.map+")");
      });

      this.after('render', function() {
        // add listeners                                                                                          
      });

      this.after('initialize', function() {
        self = this;
      });
    }
    return component(terminal, withTemplate, withMedia, withAudio);
  }
);

withTemplate.js

define(
  [
    'lib/mustache/mustache'
  ],
  function(mustache) {
    var xmlSerialize = new XMLSerializer();
    function withTemplate() {
      this.after('initialize', function() {
        var self = this;
        require(
          [
            "xml!"+self.__dir__+'/'
              +(this.attr.template_file_ ? this.attr.template_file_ : "template.xml")
          ],
          function(xml) {
            var templates = xml.getElementsByTagName("template");
            // initialize template_ hash, if not exists                                                           
            self.attr.templates_ = self.attr.templates_ || {};
            $.each(templates, function(index, template) { // write template strings to default attrs              
              var xmlText = "";
              for (var i = 0, l = template.childNodes.length; i < l; i++) {
                xmlText += xmlSerialize.serializeToString(template.childNodes[i]);
              }
              self.attr.templates_[template.getAttribute("id")] = xmlText;
            });
            // initialize template_vars_ hash, if it doesn't exist                                                
            self.attr.template_vars_ = self.attr.template_vars_ || {};
            self.attr.template_vars_.main = self.attr.template_vars_.main || {};
            if (self.attr.templates_.main) { // if there is a main template, setup ui                             
              self.$node.html(mustache.render(self.attr.templates_.main, self.attr.template_vars_.main));
            }
            self.render(); // notify component                                                                    
          }
        );
      });

      this.process_template_ = function(id, data) {
        return mustache.render(this.attr.templates_[id], data ? data : this.attr.template_vars_[id]);
      };
    }
    return withTemplate;
  }
);