Templates

jQXB can bind datasource containing arrays to HTML block (templates). Each element in an array will be bounded to the corresponding template item instance.

jQXB provides APIs in order to add / delete datasources row. Any insertion or deletion will be reflected on UI

In addition jQXB can handle calculated object member expressed as function passing the correct context

Prepare or load the jSON viewmodel...

var Customer = { 
        'Name': 'Anthony',
        'Surname': 'Murray',
        'Address': { 
                    'Street': 'Carnaby Street', 
                    'ZipCode': 'YTSCH', 
                    'Phones': [
                        { 
                            'prefix': 010, 
                            'number': 23094895, 
                            'numbercomplete': function (self) 
                                    { return self.prefix + "-" + self.number; } 
                             }, 
                       { 
                        'prefix': 0185, 
                        'number': 2930940, 
                        'numbercomplete': function (self) 
                                    { return self.prefix + "-" + self.number; } 
                             }, 
                       { 
                        'prefix': 03485, 
                        'number': 3234567, 
                        'numbercomplete': function (self) 
                                    { return self.prefix + "-" + self.number; } 
                             }] },
    };
  
Start bind data first!

..Add,remove or edit customer's phone numbers...

Customer Info

Name
Surname
Prefix Number Calculated prefix + number Actions
Delete

Append a new row Insert a row at

...inspect the datasource