ipi-jquery/js/ws-ui-parts.js

"use strict";
(function($) {
  $(document).ready(function() {


    var eventBinders = {

      menuExample: function() {
        console.log('eventBinder for menuExample', this);
        this.$elem.find('a').click(function(e) {
          e.preventDefault();
          var $link = $(this);
          console.log('menu item clicked', $link.prop('href'));
          var originalColor = $link.css('backgroundColor');
          // self.toggleMenu();
          $link.animate({
            backgroundColor: '#aaa',
          }, 70);
          $link.animate({
            backgroundColor: originalColor,
          }, 70);
          _ws.navigator.navigateTo($link.prop('href'));
        });
      }

    }

    /**
     * Render an UI part
     */
    function renderPart(partName, data) {
      var part = _ws.ui[partName];
      part.$elem.html( Mustache.render( part.tmpl, data ) );
    }

    _ws.makeView = function(elemId, props) {
      var v = {};
      props = props || {};

      v.$elem = $('#' + elemId);
      v.partName = _.camelCase(elemId);
      _ws.ui[v.partName] = v;

      if(! props.render) {
        var $tmplEl = $('script[data-tmpl-for="' + elemId + '"]');
        v.tmpl = $tmplEl.html();
        v.render = (function(data) {
          var eventBinder = eventBinders[v.partName];
          this.$elem.html( Mustache.render( this.tmpl, data ) );
          if(eventBinder) {
            eventBinder = eventBinder.bind(this);
            console.log('bind events for', v.partName);
            eventBinder();
          }
        }).bind(v);
      }
    }


    /**
     * Initialize an empty object to be populated as follows:
     *   - key is an UI element's id
     *   - value associated is an obj containing: tmpl (the template) and $elem (jQueried target element)
     */
    _ws.ui = {};

    // Iterate over the template script elements
    var $templateElems = $('script[data-tmpl-for]');
    $templateElems.each(function(idx, el) {
      return;


      // Get the script element content and target element id
      var $script = $(el);
      var tmpl = $script.html();
      var elemId = $script.data('tmpl-for');
      var $elem = $('#' + elemId);
      var partName = _.camelCase(elemId);

      // Populate the uiParts object
      _ws.ui[partName] = {
        tmpl: tmpl,
        $elem: $elem,
        render: (function(_name) {
          return function(data) {
            var eventBinder = eventBinders[_name];
            renderPart(_name, data);
            if(eventBinder) {
              eventBinder = eventBinder.bind(this);
              console.log('bind events for', _name);
              eventBinder();
            }
          };
        })(partName)
      };
    });

    // console.log(_.map(_ws.uiParts, p => (p.render.toString())));



  });
})(jQuery);