OnChange > Event

OnChange is an event given to the ObservableArray. Whenver the array is modified using the extended functions given to an array, the OnChange event is fired. The OnChange event provides EventArgs of type ArrayEventArgs that contains information about the change.

 

BeginUpdate() and EndUpdate()

Whenver BeginUpdate is called, IsUpdating is set to true and all modifications to the array will cease to fire the OnChange event. During this time, large changes can be made to the array. After EndUpdate is called, IsUpdating is set to false and the OnChange event is fired with the ModificationType.Update. Then the developer can handle a large change so that a lot of events aren’t fired. This is especially useful when making large changes to elements with children elements exposed as observable arrays, such as table rows. Here is an example:

var current = 0;
$Table("myTable").Rows.BeginUpdate();

for(var i = 0; i < 10; i++){
    var r = new Row();
    r.Cells.BeginUpdate();
    for(var j = 0; j < 10; j++){
        var c = new Cell();
        c.Text(current++);
        r.Cells.Add(c);
    }
 
    $Table("myTable").Rows.Add(r);
}

$Table("myTable").Rows.EndUpdate();  // All the rows are now added to the DOM
$Table("myTable").Rows.ForEach(function(){
    this.Cells.EndUpdate();  //All the cells for each row are now added to the DOM
});

 

This will add 100 cells to a table in one full swoop without having to modify the DOM through 100 event fires.

Last edited Mar 26, 2011 at 6:04 PM by dahrkdaiz, version 1

Comments

No comments yet.