lib/js/JsonView.js
function() {
      var t = this;
      t.$el.html('');

      // Output the heading if specified
      if (t.options.heading) {
        $(t.template.heading({value:t.options.heading})).appendTo(t.$el);
      }

      // If a non-object, just print it
      t.json = t.isBackbone ? t.model.toJSON() : t.model;
      if (typeof t.json !== 'object') {
        $(t.template.line({name:'value', value:t.json})).appendTo(t.$el);
        return;
      }
      t.keys = _.keys(t.json);

      // Info about each element, keyed by element name
      // div - The jQuery selector of the element outer div
      // span - The jQuery selector of the data value span
      // value - The element raw value
      // isBackbone - Is the element an instance of a Backbone model?
      // strValue - The currently displayed value
      // isArray - True of the element is an array (or collection)
      // innerDiv - The container for the inner view for objects
      // innerView - The inner view if the element is an object
      t.elems = {};

      // Layout the tree (without element data)
      for (var elemName in t.json) {
        var elem = t.elems[elemName] = {};
        elem.value = t.getElemValue(elemName);
        elem.isBackbone = elem.value instanceof Backbone.Model || elem.value instanceof Backbone.Collection;
        elem.div = $(t.template.line({name:elemName, value: '&nbsp;'})).appendTo(t.$el);
        elem.span = $('.data', elem.div);

        // Render a sub-element as another JsonView
        if (elem.value !== null && typeof elem.value === 'object') {
          elem.div.addClass('open-close').data({elemName:elemName});
          $('i', elem.div).html('');
          elem.innerDiv = $(t.template.inner()).appendTo(t.$el);
          elem.innerView = new JsonView({
            model: elem.value,
            closedOnInit: t.closedOnInit
          });
          elem.innerView.render();
          elem.innerView.$el.appendTo(elem.innerDiv);
          elem.isArray = _.isArray(elem.value);
          $(t.template.endInner({symbol:elem.isArray ? "]" : "}"})).appendTo(elem.innerDiv);
        }
      }

      // Bind the change handler
      if (t.isBackbone) {
        t.model.bind('change', t.setData, t);
      }

      // Add element data to the tree
      t.setData();

      // Reset for future renders
      t.closedOnInit = false;
    }
function() {
      var t = this;
      t.$el.html('');

      // Output the heading if specified
      if (t.options.heading) {
        $(t.template.heading({value:t.options.heading})).appendTo(t.$el);
      }

      // If a non-object, just print it
      t.json = t.isBackbone ? t.model.toJSON() : t.model;
      if (typeof t.json !== 'object') {
        $(t.template.line({name:'value', value:t.json})).appendTo(t.$el);
        return;
      }
      t.keys = _.keys(t.json);

      // Info about each element, keyed by element name
      // div - The jQuery selector of the element outer div
      // span - The jQuery selector of the data value span
      // value - The element raw value
      // isBackbone - Is the element an instance of a Backbone model?
      // strValue - The currently displayed value
      // isArray - True of the element is an array (or collection)
      // innerDiv - The container for the inner view for objects
      // innerView - The inner view if the element is an object
      t.elems = {};

      // Layout the tree (without element data)
      for (var elemName in t.json) {
        var elem = t.elems[elemName] = {};
        elem.value = t.getElemValue(elemName);
        elem.isBackbone = elem.value instanceof Backbone.Model || elem.value instanceof Backbone.Collection;
        elem.div = $(t.template.line({name:elemName, value: '&nbsp;'})).appendTo(t.$el);
        elem.span = $('.data', elem.div);

        // Render a sub-element as another JsonView
        if (elem.value !== null && typeof elem.value === 'object') {
          elem.div.addClass('open-close').data({elemName:elemName});
          $('i', elem.div).html('');
          elem.innerDiv = $(t.template.inner()).appendTo(t.$el);
          elem.innerView = new JsonView({
            model: elem.value,
            closedOnInit: t.closedOnInit
          });
          elem.innerView.render();
          elem.innerView.$el.appendTo(elem.innerDiv);
          elem.isArray = _.isArray(elem.value);
          $(t.template.endInner({symbol:elem.isArray ? "]" : "}"})).appendTo(elem.innerDiv);
        }
      }

      // Bind the change handler
      if (t.isBackbone) {
        t.model.bind('change', t.setData, t);
      }

      // Add element data to the tree
      t.setData();

      // Reset for future renders
      t.closedOnInit = false;
    }
function ( ) { var t = this ; t . $el . html ( '' ) ; // Output the heading if specified if ( t . options . heading ) { $ ( t . template . heading ( { value : t . options . heading } ) ) . appendTo ( t . $el ) ; } // If a non-object, just print it t . json = t . isBackbone ? t . model . toJSON ( ) : t . model ; if ( typeof t . json !== 'object' ) { $ ( t . template . line ( { name : 'value' , value : t . json } ) ) . appendTo ( t . $el ) ; return ; } t . keys = _ . keys ( t . json ) ; // Info about each element, keyed by element name // div - The jQuery selector of the element outer div // span - The jQuery selector of the data value span // value - The element raw value // isBackbone - Is the element an instance of a Backbone model? // strValue - The currently displayed value // isArray - True of the element is an array (or collection) // innerDiv - The container for the inner view for objects // innerView - The inner view if the element is an object t . elems = { } ; // Layout the tree (without element data) for ( var elemName in t . json ) { var elem = t . elems [ elemName ] = { } ; elem . value = t . getElemValue ( elemName ) ; elem . isBackbone = elem . value instanceof Backbone . Model || elem . value instanceof Backbone . Collection ; elem . div = $ ( t . template . line ( { name : elemName , value : '&nbsp;' } ) ) . appendTo ( t . $el ) ; elem . span = $ ( '.data' , elem . div ) ; // Render a sub-element as another JsonView if ( elem . value !== null && typeof elem . value === 'object' ) { elem . div . addClass ( 'open-close' ) . data ( { elemName : elemName } ) ; $ ( 'i' , elem . div ) . html ( '' ) ; elem . innerDiv = $ ( t . template . inner ( ) ) . appendTo ( t . $el ) ; elem . innerView = new JsonView ( { model : elem . value , closedOnInit : t . closedOnInit } ) ; elem . innerView . render ( ) ; elem . innerView . $el . appendTo ( elem . innerDiv ) ; elem . isArray = _ . isArray ( elem . value ) ; $ ( t . template . endInner ( { symbol : elem . isArray ? "]" : "}" } ) ) . appendTo ( elem . innerDiv ) ; } } // Bind the change handler if ( t . isBackbone ) { t . model . bind ( 'change' , t . setData , t ) ; } // Add element data to the tree t . setData ( ) ; // Reset for future renders t . closedOnInit = false ; }
Render new HTML
Render new HTML