Ractive.js 치트시트

Ractive.js는 양방향 데이터 바인딩, 전환 효과, 반응형 연산을 DOM에 제공하는 템플릿 기반 UI 라이브러리입니다.

초기화

const ractive = new Ractive({
  target: '#app',
  template: '#my-template',
  data: {
    greeting: 'Hello',
    user: { name: 'Alice' },
    count: 0
  }
});

---

템플릿 문법 (Mustache)

<!-- 데이터 출력 -->
<h1>{{greeting}}, {{user.name}}!</h1>

<!-- 원시 HTML 출력 -->
<div>{{{unescapedHtml}}}</div>

<!-- 양방향 입력 바인딩 -->
<input value="{{user.name}}" />

<!-- 조건문 -->
{{#if count > 0}}
  <p>장바구니 항목: {{count}}</p>
{{else}}
  <p>장바구니가 비어 있습니다.</p>
{{/if}}

<!-- 목록 반복 -->
<ul>
  {{#each items:i}}
    <li>{{i + 1}}: {{this.name}}</li>
  {{/each}}
</ul>

---

인스턴스 메서드

// 반응형 데이터 읽기 및 쓰기
ractive.get('user.name');        // => "Alice"
ractive.set('user.name', 'Bob'); // Updates DOM immediately

// 숫자 도우미
ractive.add('count', 1);
ractive.subtract('count', 1);

// 불리언 값 토글
ractive.toggle('isVisible');

// 변경사항 관찰
ractive.observe('user.name', (newValue, oldValue) => {
  console.log(`이름이 다음으로 변경됨: ${newValue}`);
});

---

이벤트 처리

<button on-click="@this.fire('submitForm', user)">제출</button>

ractive.on('submitForm', (event, user) => {
  console.log('제출된 사용자:', user);
});

---

참고자료

• Ractive.js 공식 문서