Sys.Observer Class

Article
02/13/2013

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

Namespace: Sys

Inherits: None

Sys.Observer.addPropertyChanged(targetObject, myHandler);

Members

Name	Description
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.

Remarks

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.

Example

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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">

<head>  
  <title>Linked DataViews</title>
  <link href="styles/list.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" 
      src="../MicrosoftAjax/MicrosoftAjax.debug.js"></script>
  <script type="text/javascript" 
      src="../MicrosoftAjax/MicrosoftAjaxTemplates.debug.js"></script>

  <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.
  Sys.Observer.makeObservable(imageData);

    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.beginUpdate();
      imageData.remove(dataItem);
      imageData.insert(newIndex, dataItem);
      imageData.endUpdate();
    }
  </script>
</head>

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

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

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

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

Sys.Observer Class

Members

Remarks

Example

See Also

Other Resources

Additional resources