Sys.Observer 클래스

배열, DOM 요소 및 개체와 같은 대상 개체에 업데이트 및 관리 기능을 추가합니다.

네임스페이스: Sys

상속: 없음

Sys.Observer.addPropertyChanged(targetObject, myHandler);

Name

설명

Sys.Observer.add 메서드

항목을 예측 가능한 방식으로 컬렉션에 추가합니다.

Sys.Observer.addCollectionChanged 메서드

대상에 이벤트 처리기를 추가합니다.

Sys.Observer.addEventHandler 메서드

예측 가능한 이벤트 처리기를 대상에 추가합니다.

Sys.Observer.addPropertyChanged 메서드

대상에 propertyChanged 이벤트 처리기를 추가합니다.

Sys.Observer.addRange 메서드

항목을 예측 가능한 방식으로 컬렉션에 추가합니다.

Sys.Observer.beginUpdate 메서드

대상 개체 업데이트 프로세스를 시작합니다.

Sys.Observer.clear 메서드

해당 요소의 배열을 예측 가능한 방식으로 지웁니다.

Sys.Observer.endUpdate 메서드

대상 개체를 업데이트하는 프로세스를 종료합니다.

Sys.Observer.insert 메서드

항목을 예측 가능한 방식으로 지정된 인덱스에 삽입합니다.

Sys.Observer.isUpdating 메서드

대상이 업데이트되는 것을 나타냅니다.

Sys.Observer.makeObservable 메서드

예측 가능한 메서드를 추가하여 개체를 직접 예측 가능하게 만듭니다.

Sys.Observer.raiseCollectionChanged 메서드

collectionChanged 이벤트를 발생시킵니다.

Sys.Observer.raiseEvent 메서드

대상에 예측 가능한 이벤트를 발생시킵니다.

Sys.Observer.raisePropertyChanged 메서드

propertyChanged 알림 이벤트를 발생시킵니다.

Sys.Observer.remove 메서드

예측 가능한 방식으로 배열에서 첫 번째 항목을 제거합니다.

Sys.Observer.removeAt 메서드

예측 가능한 방식으로 배열에서 지정된 인덱스의 항목을 제거합니다.

Sys.Observer.removeCollectionChanged 메서드

대상에서 collectionChanged 이벤트 처리기를 제거합니다.

Sys.Observer.removePropertyChanged 메서드

대상에서 propertyChanged 이벤트 처리기를 제거합니다.

Sys.Observer.removeEventHandler 메서드

대상에서 예측 가능한 이벤트 처리기를 제거합니다.

Sys.Observer.setValue 메서드

예측 가능한 방식으로 대상에 속성 또는 필드를 설정합니다.

Sys.Observer.isUpdating 속성

대상 업데이트 여부를 나타내는 부울 값을 가져옵니다.

Sys.Observer 클래스는 관찰자 패턴을 기반으로 합니다. Sys.Observer 클래스는 별도의 개체(주제)에서 관심 있는 종속성(관찰자) 목록을 유지합니다. Sys.Observer 클래스에 포함된 모든 메서드는 정적입니다.

Sys.Observer 클래스와 함께 사용하려면 개체는 개체, 배열 또는 DOM 요소가 되어야 합니다.

다음 예제에서는 관찰자 개체를 선언하고 DataView 개체에 바인딩하는 방법을 보여 줍니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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>
표시: