Share via

Sys.Observer Class

Adds update and management functionality to target objects such as arrays, DOM elements, and objects.

Namespace: Sys

Inherits: None

Sys.Observer.addPropertyChanged(targetObject, myHandler);




Sys.Observer.add Method

Adds an item to the collection in an observable manner.

Sys.Observer.addCollectionChanged Method

Adds an event handler to the target.

Sys.Observer.addEventHandler Method

Adds an observable event handler to the target.

Sys.Observer.addPropertyChanged Method

Adds a propertyChanged event handler to the target.

Sys.Observer.addRange Method

Adds items to the collection in an observable manner.

Sys.Observer.beginUpdate Method

Begins the process of updating the target object.

Sys.Observer.clear Method

Clears the array of its elements in an observable manner.

Sys.Observer.endUpdate Method

Ends the process of updating the target object.

Sys.Observer.insert Method

Inserts an item at the specified index in an observable manner.

Sys.Observer.isUpdating Method

Indicates that the target is being updated.

Sys.Observer.makeObservable Method

Makes an object directly observable by adding observable methods to it.

Sys.Observer.raiseCollectionChanged Method

Raises the collectionChanged event.

Sys.Observer.raiseEvent Method

Raises an observable event on the target.

Sys.Observer.raisePropertyChanged Method

Raises a propertyChanged notification event.

Sys.Observer.remove Method

Removes the first occurrence of an item from the array in an observable manner.

Sys.Observer.removeAt Method

Removes the item at the specified index from the array in an observable manner.

Sys.Observer.removeCollectionChanged Method

Removes a collectionChanged event handler from the target.

Sys.Observer.removePropertyChanged Method

Removes a propertyChanged event handler from the target.

Sys.Observer.removeEventHandler Method

Removes an observable event handler from the target.

Sys.Observer.setValue Method

Sets a property or field on the target in an observable manner.

Sys.Observer.isUpdating Property

Gets a Boolean value that indicates whether the target is updating.


The Sys.Observer class is based on the Observer pattern. The Sys.Observer class maintains a list of interested dependents (observers) in a separate object (the subject). All methods that are contained in the Sys.Observer class are static.

In order to be used with the Sys.Observer class, an object must be an object, array, or DOM element.


The following example shows how to declare an Observer object and bind it to a DataView object.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">

  <title>Linked DataViews</title>
  <link href="styles/list.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" 
  <script type="text/javascript" 

  <script type="text/javascript">
    var imageData = [
      { Name: "Crashing water", Description: "A splash of waves captured." },
      { Name: "Dazed", Description: "Mid-day heat?" },
      { Name: "Close Zoom on Giraffe", Description: "Closeup of a Giraffe at Wild Animal Park." },
      { Name: "Pier", Description: "A pier in Morro Bay." },
      { Name: "Seagull reflections", Description: "Seagulls at peace." },
      { Name: "Spain", Description: "In Balboa Park, in downtown San Diego." },
      { Name: "Sumatran Tiger", Description: "Restful." }

  // Make the data collection observable.

    function moveUp(sender) {
      var nameList = $find("names");

       // Find the DataView item that the button was in.
      var item = nameList.findContext(sender);
      var index = item.index;
      var dataItem = item.dataItem;
      var newIndex = index > 0 ? index - 1 : imageData.length;

      // Move data item up one, which invokes an observer.
      imageData.insert(newIndex, dataItem);

<body xmlns:dataview="javascript:Sys.UI.DataView" xmlns:sys="javascript:Sys">
  <div class="title">Names:</div>

  <ul class="sys-template list" id="names"
      dataview:data="{{ imageData }}"
    <li sys:command="select">
      <button onclick = "moveUp(this)">↑</button>
      <span>{{ Name }}</span>

  <div class="title">Descriptions:</div>

  <ul class="sys-template list"
      dataview:data="{{ imageData }}"
      dataview:selectedindex="{binding selectedIndex, source=nameList}"
    <li sys:command="select">{{ Description }}</li>

See Also

Other Resources

Language Reference