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 = {};
      v.props = props || {};

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

      // Assign a default render function if none given
      if(! v.props.render) {
        var $tmplEl = $('script[data-tmpl-for="' + elemId + '"]');
        v.tmpl = $tmplEl.html();
        v.render = (function(data) {
          if(! data) {
            console.log('WARNING! You should provide data for #' + elemId + "'s render()");
          }
          // 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();
          // }
          console.log('rebind events after render', this);
          this.bindEvents();
        }).bind(v);
      }
      // Otherwise bind the provided one
      else {
        v.render = props.render.bind(v);
      }

      // Set event handlers
      if(v.props.events) {
        v.bindEvents = (function() {
          var events = this.props.events;
          for(var descriptor in events) {
            var handler = events[descriptor];
            var bits = descriptor.split(' ');
            var evtName = bits.shift();
            var selector = bits.join(' ');
            console.log('#### bind', descriptor, 'e:' + evtName, 's:' + selector, handler.toString())
            v.$elem.find(selector).on(evtName, handler);
          }
        }).bind(v);
        v.bindEvents();
      }
      else {
        v.bindEvents = function() {};
      }
    }


    /**
     * 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);