Plugin

플러그인은 뷰 모델과 연결되어 작동하는 작은 컴포넌트입니다. 플러그인 컴포넌트는 모델과 1:1 관계로 연결되며 데이타 바인딩으로 표현됩니다. Data Binding 을 위해 HTML 노드에 data-role="bind" 를 정의하고 data-type="text" 를 정의합니다. 이 때 data-type 에 명시된 text 를 플러그인이라 합니다. 플러그인은 기본 제공되는 빌트인 플러그인이 있으며 직접 작성하여 사용할 수 도 있습니다.

Built-in Plugins

• text
  연결된 모델의 타입이 문자열인 경우 연결된 노드의 InnerText로 출력시키는 플러그인.

• input-text
  연결된 모델의 타입이 문자열인 경우 연결된 input[type=text] 폼 컨트롤의 value로 출력시키는 플러그인

• select
  연결된 모델의 타입이 배열인 경우 연결된 select 폼 컨트롤의 option 리스트로 출력시키는 플러그인

• checkbox
  연결된 모델의 타입이 Boolean인 경우 연결된 input[type=checkbox] 폼 컨트롤의 checked 상태를 토글시키는 플러그인

Example

sample.hbs

<div>
  <h1>데이타 바인딩</h1>
  <p>
    뷰 모델과 연결된 데이타를 출력합니다.<br>
    현재 연결된 타임스템프 값입니다: <span data-role="bind" data-name="timestamp" data-type="text"></span>
  </p>
</div>

sample.js

import Woowahan from 'woowahan';
import template from './sample.hbs';

default export Woowahan.View.create('Sample', {
  template,

  initialize() {
    this.setModel({
      timestamp: Date.now()
    });

    this.super();
  },

  viewDidMount() {
    // 1초 주기로 뷰 모델인 timestamp를 갱신한다.
    setInterval(() => this.setModel('timestamp', Date.now()), 1000);
  }
});

사용자 플러그인

빌트인 플러그인은 아주 기본적인 동작을 하는 플러그인 만을 제공합니다. 플러그인은 필요한 UI 형태에 따라 원하는 형태로 다양하게 만들 수 있습니다. 데이타 상태에 따라 DOM 을 업데이트 해야하는 경우 뷰에서 코드로 표현하는 것 보다 플러그인을 만드는 것이 효과적일 때가 많습니다.

플러그인 개발은 아주 간단합니다. 먼저 플러그인이 될 함수를 작성합니다.

strong.js

default export function strong(element, value) {
  element.innerHTML = `<strong>${value.toString()}</strong>`;
}

모델 데이타의 문자열을 strong 태그로 감싸서 출력하는 간단한 플러그인입니다. 플러그인 함수는 두 개의 인수를 받습니다. 첫 번째는 플러그인과 연결된 DOM Element 객체입니다. 필요한 만큼의 DOM 조작을 할 수 있습니다. 두 번째 인자는 연결된 뷰 모델의 데이타입니다. 플러그인은 연결된 모델 데이타가 변경될 때 마다 반복 호출됩니다. 이 점을 기억하고 플러그인을 작성할 필요가 있습니다. 너무 커다란 UI 를 플러그인으로 만든다면 성능에 문제가 발생할 수 있기 때문입니다.

이제 플러그인을 사용하기 위해 앱에 등록해 주십시오.

main.js

import Woowahan from 'woowahan';
import strong from './strong';

const app = new Woowahan();
const strongPlugin = Woowahan.Plugin('strong', strong);

app.use([ strongPlugin  ]);

const main = Woowahan.View.create('main', {
  template: `
    <h1>Main</h1>
    <p data-role="bind" data-name="description" data-type="strong"></p>
  `, 

  initialize() {
    this.setModel({
      description: 'Hello Plugin??'
    });

    this.super();
  }
}

app.start({ url: '/', view: main, container: 'body' });

작성한 플러그인 함수를 플러그인으로 등록하기 위한 Woowahan.Plugin 을 이용합니다. 첫 번째 인수는 data-type 표현될 플러그인 이름입니다. 플러그인 이름은 하나의 앱 내에서 유일해야 하며 대소문자를 구별하지 않습니다. 두 번째 인수에 플러그인 함수입니다.

v0.3.1 새로운 플러그인

woowahanjs v0.3.1 부터 새로운 플러그인 정의가 추가되었습니다. 기존 방식이 뷰 모델과 연결된(bind) 작은 UI 컴포넌트(plugin) 라는 개념을 강조했다면 새로운 방식은 보다 명시적으로 뷰 모델 데이타의 변경 사항이 플러그인에 주입되는 문법을 가집니다. 먼저 동작은 동일하나 기존 방식과 새로운 방식의 차이점을 셈플 코드로 확인해 보세요.

<div>

  기존 방식: <span data-role="bind" data-name="timestamp" data-type="text"></span>

  새로운 방식: <span data-role="plugin" data-plugins="timestamp => text"></span>

</div>

예제 코드에서 직관적으로 확인할 수 있듯이 data-role 은 명시적으로 plugin 입니다. 그리고 data-plugins 에서 뷰 모델 => 플러그인 표현식이 사용됩니다. data-plugin 이 아닌 data-plugins 인 이유는 복수의 플러그인을 기술할 수 있기 때문입니다. 기존 bind 방식으론 하나의 DOM 노드에 단 하나의 플러그인만 연결될 수 있었습니다. 복수의 플러그인은 다음과 같이 표현할 수 있습니다.

<span data-role="plugin" data-plugins="timestamp => text + hasTimestamp => toggleActive"></span>

N 개의 플로그인을 + 연산자로 표현할 수 있습니다.

N개의 뷰모델과 연결되는 플러그인

새로운 플러그인은 N 개의 뷰 모델과 연결되는 하나의 플러그인 또한 표현할 수 있습니다. 만약 필요하다면 다음과 같이 작성합니다.

<span data-role="plugin" data-plugins="timestamp,datetime => text"></span>

이제 timestamp 또는 datetime 값의 변화가 text 플러그인에 전달됩니다.

하나의 모델과 연결된 하나의 플러그인을 표현할 때 기존 bind 방식과 새로운 plugin 방식은 완전히 동일합니다.
어떤 방식을 사용해도 완전히 동일한 동작을 보장합니다. 그러나 추후 확장성을 고려하면 plugin 방식 사용을 권장합니다.
(주의) 플러그인 제작 방식의 차이는 두 방식 모두 전혀 차이가 없습니다.