ورقة غش مكتبة Ractive.js

Ractive.js هي مكتبة واجهة مستخدم مبنية على القوالب توفر ربطاً تفاعلياً للبيانات ثنائي الاتجاه وتحولات سلسة وحسابات متجاوبة لشجرة DOM.

التهيئة والبدء

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>

---

دوال النسخة (Instance Methods)

// قراءة وكتابة البيانات التفاعلية
ractive.get('user.name');        // => "Alice"
ractive.set('user.name', 'Bob'); // Updates DOM immediately

// دوال مساعدة للأرقام
ractive.add('count', 1);
ractive.subtract('count', 1);

// تبديل القيمة المنطقية (Boolean)
ractive.toggle('isVisible');

// مراقبة التغييرات
ractive.observe('user.name', (newValue, oldValue) => {
  console.log(`تغير الاسم إلى ${newValue}`);
});

---

التعامل مع الأحداث (Event Handling)

<button on-click="@this.fire('submitForm', user)">إرسال</button>

ractive.on('submitForm', (event, user) => {
  console.log('المستخدم المرسل:', user);
});

---

مراجع مفيدة

• التوثيق الرسمي لمكتبة Ractive.js