QueryTemplates Light for JavaScript live demos

Demo #1: valuesToLoopFirst combined with valuesToSelector

Data

var data = [
  {'User': {'name': 'foo'},
    'Tags': [
      {'tag': 'php'},
      {'tag': 'js'}
  ]},
  {'User': {'name': 'bar'},
    'Tags': [
      {'tag': 'perl'}
  ]},
  {'User': {'name': 'fooBar'},
    'Tags': [
      {'tag': 'php'},
      {'tag': 'js'},
      {'tag': 'perl'}
  ]}
];

Code

$('ul > li:has(ul)')
  .valuesToLoopFirst(data, function(row) {
    this
      .valuesToSelector(row.User, 'span.%k')
      .find('> ul > li')
        .valuesToLoopFirst(row.Tags, function(tag) {
          this.valuesToSelector(tag);
        });
  });
}

• lorem ipsum
  • tag 1
  • tag 2
• lorem ipsum
  • tag 1
  • tag 2

Demo #2: valuesToForm

Data

var data = {
  'text-example': 'new value',
  'checkbox-example': true,
  'radio-example': 'second',
  'select-example': ['second', 'third'],
  'textarea-example': 'new value',
};

Code

$('form')
  .valuesToForm(data);

text-example

checkbox-example

radio-example

select-example

first second third

textarea-example

old

Demo #3: formFromValues

Data

var structure = {
  '__form': {'id': 'myFormId'},
  0: { 
    '__label': 'Fieldset 1 legend',
    'default-field': {  // 'text' is default
      'label': 'default-field label',
      'id': 'default-field-id'
    },
    'text-field': {
      0: 'text',
      'label': 'text-field label',
      'id': 'text-field-id'
    },
    'hidden-field': 'hidden',
    'checkbox-field': 'checkbox'
  },
  1: {
    '__label': 'Fieldset 2 legend',
    'select-field': {
      0: 'select', 
      'label': 'select-field label'
    },
    'radio-field': {
      0: 'radio', 
      'values': ['possibleValue1', 'possibleValue2']
    },
    'textarea-field': 'textarea'
  }
};
var data = {
  'select-field': {
    // no optgroup
    'bar1': 'bar1 label',
    'bar2': 'bar2 label',
    'bar3': 'bar3 label'
  }
};
var record = {
  'text-field': 'value from record',
  'radio-field': 'possibleValue2'
};

Code

$('form.formFromValues')
  .formFromValues(
    record, structure, undefined, data
  );