State

State (State 상태 동작)

State는 요소의 활성/비활성, 로딩, 오류 같은 상태를 관리하고 상태에 따라 텍스트를 바꿔주는 동작 모듈이에요. 상태별 클래스 이름을 일일이 지저분하게 추가/제거하지 않아도 되게 해줘요.

출처: 문서

본문

State는 다음과 같은 것들을 할 수 있게 해줘요:

• 로딩 상태를 AJAX 요청에 연결
• 텍스트를 각 상태에 연결. 예를 들어 특정 버튼이 현재 상태에 따라 hover 시 Follow → Followed → Unfollow로 바뀌도록 함
• 여러 요소의 상태를 서로 연결. 예를 들어 페이지에서 한 버튼이 성공적으로 활성화된 후 다른 모든 follow 버튼도 자동으로 활성화되도록 함
• 활성화/비활성화 테스트 함수를 제공해 요소가 '활성화'되는 것을 허용하거나 거부하는 기준을 줌
• 사이트 곳곳에 지저분한 addClass/removeClass를 뿌리지 않고도 상태를 나타내는 클래스 이름을 올바르게 추가/제거함

Description

Simple activate example (간단한 활성화 예제)

// immediately activates element
        $('.my.button')
          .state('activate')
        ;
        // activates element on click
        $('.my.button')
         .state()
        ;

API example (API 예제)

// typically you'd define all your templated urls in one config file
        $.fn.api.settings.api.follow = '/follow/{id}/'
        $('.foo.button')
          .api({ action: 'follow' })
          .state({
            onActivate: function() {
              $(this).state('flash text');
            },
            text: {
              inactive   : 'Follow',
              active     : 'Followed',
              deactivate : 'Unfollow',
              flash      : 'Added follower!'
            }
          })
        ;
       
       
            Follow (팔로우)

Text example (텍스트 예제)

// Changes button between Follow and Following
        $('.follow.button')
          .state({
            text: {
              inactive : 'Follow',
              active   : 'Following'
            }
          })
        ;
       
       Follow (팔로우)

// Changes text on activation and hover
        // The hover text is different when active and inactive
        $('.vote.button')
          .state({
            text: {
              inactive  : 'Vote',
              activate  : 'Cast Vote',
              active    : 'Voted',
              deactivate: 'Remove Vote'
            }
          })
        ;
       
       Vote (투표)

Behaviors (동작)

다음의 모든 동작은 아래 문법으로 호출할 수 있어요:



$('.your.element')
  .state('behavior name', argumentOne, argumentTwo)
;





  Behavior (동작)
  Description (설명)
  
    is active
    Returns whether element state is active (요소 상태가 활성인지 반환)
  
    is inactive
    Returns whether element state is inactive (요소 상태가 비활성인지 반환)
  
    is state(type)
    Checks the element for specific state, given by a string name (문자열 이름으로 주어진 특정 상태를 요소에서 확인)
  
    is enabled
    Returns whether element is enabled (요소가 활성화되었는지 반환)
  
    is disabled
    Returns whether element is disabled (요소가 비활성화되었는지 반환)
  
    is loading
    Returns whether element is loading (요소가 로딩 중인지 반환)
  
    is textEnabled
    Returns whether element is capable to show text which could be changed by states (요소가 상태에 의해 바뀔 수 있는 텍스트를 표시할 수 있는지 반환)
  
    is button
    Returns whether element is a [button](/elements/button.html) (요소가 [button](/elements/button.html)인지 반환)
  
    is input
    Returns whether element is an [input](/elements/input.html) (요소가 [input](/elements/input.html)인지 반환)
  
    is progress
    Returns whether element is a [progress](/modules/progress.html) (요소가 [progress](/modules/progress.html)인지 반환)
  
    allows(state)
    Checks if a specific state, given by a string name, is currently allowed to be changed (문자열 이름으로 주어진 특정 상태가 현재 변경 가능한지 확인)
  
    allow(state)
    Allows change of element state, given by a string name (문자열 이름으로 주어진 요소 상태 변경 허용)
  
    disallow(state)
    Disallows change of element state, given by a string name (문자열 이름으로 주어진 요소 상태 변경 금지)
  
    activate
    Sets element to active state (요소를 활성 상태로 설정)
  
    deactivate
    Sets element to inactive state (요소를 비활성 상태로 설정)
  
    enable
    Sets element as enabled (요소를 활성화로 설정)
  
    disable
    Sets element as disabled (요소를 비활성화로 설정)
  
    set state(state)
    Sets a specific state, given by a string name (문자열 이름으로 주어진 특정 상태 설정)
  
    remove state(state)
    Removes a specific state, given by a string name (문자열 이름으로 주어진 특정 상태 제거)
  
    change state
    Toggles between active/inactive state immediatly without any checks (어떤 확인 없이 활성/비활성 상태를 즉시 토글)
  
    toggle state
    Toggles between active/inactive state but checks if element is active and uses a possible attached [api](/behaviors/api.html) (활성/비활성 상태를 토글하되 요소가 활성인지 확인하고 연결된 [api](/behaviors/api.html)를 사용할 수 있음)
  
    flash text(text, duration, callback)
    Changes the elements text for an optional given amount of time. After that, reverts the text to the previous value and optionally calls a given callback function (선택적으로 주어진 시간 동안 요소의 텍스트를 변경. 이후 텍스트를 이전 값으로 되돌리고 선택적으로 주어진 콜백 함수 호출)
  
    refresh
    Refreshes cached selectors (캐시된 선택자 새로고침)
  
    destroy
    Removes State settings from the element and all events (요소와 모든 이벤트에서 State 설정 제거)

Settings (설정)

    Setting (설정)
    Default (기본값)
    Description (설명)
  
  
    automatic
    true
    Whether possible states should be determined automatically based on type of UI (가능한 상태를 UI 유형에 따라 자동으로 결정할지 여부)
  
    sync
    false
    When set to `true` and state is used on multiple elements, state will be synced across all bound elements. (`true`로 설정하고 여러 요소에서 state를 사용하면 바인딩된 모든 요소 간에 상태가 동기화돼요.)
  
    flashDuration
    1000
    Default duration to show text when using `flash text`. (`flash text` 사용 시 텍스트를 보여주는 기본 시간)
  
    filter
    
    
      filter: {
          text: '.loading, .disabled',
          active: '.disabled',
      }
    
    
    Selector filter to recognize element states which cannot be changed (변경할 수 없는 요소 상태를 인식하는 선택자 필터)
  
    context
    false
    When set to a selector, will use a delegated pattern to bind events from this element. (선택자로 설정하면 이 요소에서 이벤트를 바인딩하기 위해 위임(delegated) 패턴을 사용해요.)
  
    states
    
      
      states: {
          active: true,
          disabled: true,
          error: true,
          loading: true,
          success: true,
          warning: true
      }
      
    
    Default states. When set to `false` those are disallowed for a change. (기본 상태. `false`로 설정하면 해당 상태는 변경이 금지돼요.)
  
    text
    
      
      text: {
          disabled: false,
          flash: false,
          hover: false,
          active: false,
          inactive: false,
          activate: false,
          deactivate: false
      }
      
    
    State texts for relevant elements like [button](/elements/button.html). Provide strings here when needed. ([button](/elements/button.html) 같은 관련 요소의 상태 텍스트. 필요할 때 여기에 문자열을 제공해요.)

Callbacks (콜백)

  콜백은 특정 동작 이후에 실행될 함수를 지정해요.



  
    Setting (설정)
    Context (컨텍스트)
    Description (설명)
  
  
    activateTest
    initialized element
    Called before a state is activated. Return false to cancel state activation (상태가 활성화되기 전에 호출. false를 반환하면 상태 활성화를 취소)
  
    deactivateTest
    initialized element
    Called before a state is deactivated. Return false to cancel state deactivation (상태가 비활성화되기 전에 호출. false를 반환하면 상태 비활성화를 취소)
  
    onActivate
    initialized element
    Called when state was activated (상태가 활성화되었을 때 호출)
  
    onDeactivate
    initialized element
    Called when state was deactivated (상태가 비활성화되었을 때 호출)
  
    onChange
    initialized element
    Called after a state has changed (상태가 변경된 후 호출)

DOM Settings (DOM 설정)

  DOM 설정은 이 모듈이 DOM과 어떻게 인터페이스할지 지정해요.



  
    Setting (설정)
    Default (기본값)
    Description (설명)
  
  
    namespace
    state
    Event namespace. Makes sure module teardown does not effect other events attached to an element. (이벤트 네임스페이스. 모듈 해제가 요소에 연결된 다른 이벤트에 영향을 주지 않도록 해요.)
  
    selector
    
      
      selector: {
        text : false
      }
      
    
    Selectors used to find parts of a module (모듈의 일부를 찾는 데 사용되는 선택자)
  
    className
    
      
      className: {
        active   : 'active',
        disabled : 'disabled',
        error    : 'error',
        loading  : 'loading',
        success  : 'success',
        warning  : 'warning'
      }
      
    
    Class names used to determine element state (요소 상태를 결정하는 데 사용되는 클래스 이름)
  
    metadata
    
      
      metadata: {
        promise    : 'promise',
        storedText : 'stored-text'
      }
      
    
    Metadata used to store text changes (텍스트 변경을 저장하는 데 사용되는 메타데이터)

Debug Settings (디버그 설정)

  디버그 설정은 콘솔로의 디버그 출력을 제어해요.

이 설정들은 모든 모듈에 공통으로 적용되며, 컴포넌트가 콘텐츠를 DOM 속성에 연결하는 방식과 모듈의 디버깅 설정을 정의해요.



  
    Setting (설정)
    Default (기본값)
    Description (설명)
  
  
    name
    State
    Name used in log statements (로그 문에 사용되는 이름)
  
    silent
    false
    Silences all console output including error messages, regardless of other debug settings. (다른 디버그 설정과 무관하게 오류 메시지를 포함한 모든 콘솔 출력을 조용히 해요.)
  
    debug
    false
    Debug output to console (콘솔에 디버그 출력)
  
    performance
    true
    Show `console.table` output with performance metrics (성능 지표와 함께 `console.table` 출력 표시)
  
    verbose
    false
    Debug output includes all internal behaviors (디버그 출력에 모든 내부 동작 포함)
  
    errors
    
      
      // errors
      error : {
        method     : 'The method you called is not defined.'
      }

더 알아보기 (Learn more)

State 동작은 API나 폼과 함께 쓰면 로딩/성공/오류 상태를 텍스트 변경과 자연스럽게 연결할 수 있어요. activateTest/deactivateTest로 상태 전환 허용 여부를 제어하고, text로 각 상태의 라벨을 다듬어 보세요.