dbindly

Configuration Options

Pass these options to DBindly.init():

DBindly.init({
  // Required
  apiUrl: 'https://api.dbindly.com',
 
  // Authentication
  apiKey: 'pk_live_your_api_key',
 
  // Caching
  cache: true,
  cacheTTL: 300000, // 5 minutes in milliseconds
 
  // Behavior
  debug: false,
  showSkeletons: true,
 
  // Network
  retryAttempts: 3,
  retryDelay: 1000, // 1 second
  timeout: 10000, // 10 seconds
 
  // Callbacks
  onLoad: (data) => console.log('Loaded:', data),
  onError: (error) => console.error('Error:', error),
  onDataLoaded: (data) => console.log('Rendered:', data)
});

Option Reference

Required Options

Option	Type	Description
`apiUrl`	string	Base URL for your API (without trailing slash)

Authentication

Option	Type	Default	Description
`apiKey`	string	`''`	Your API key (pk_live_* or pk_test_*)

Caching

Option	Type	Default	Description
`cache`	boolean	`true`	Enable localStorage caching
`cacheTTL`	number	`300000`	Cache time-to-live in milliseconds

Behavior

Option	Type	Default	Description
`debug`	boolean	`false`	Enable console logging
`showSkeletons`	boolean	`true`	Show skeleton loading states

Network

Option	Type	Default	Description
`retryAttempts`	number	`3`	Number of retry attempts on failure
`retryDelay`	number	`1000`	Delay between retries (ms)
`timeout`	number	`10000`	Request timeout (ms)

Callbacks

Option	Type	Description
`onLoad`	function	Called after data is loaded from API
`onError`	function	Called when an error occurs
`onDataLoaded`	function	Called after data is rendered to DOM

Examples

Development Mode

DBindly.init({
  apiUrl: 'http://localhost:3000/api',
  apiKey: 'pk_test_dev_key',
  cache: false,
  debug: true
});

Production Mode

DBindly.init({
  apiUrl: 'https://api.dbindly.com',
  apiKey: 'pk_live_your_key',
  cache: true,
  cacheTTL: 600000, // 10 minutes
  debug: false
});

With Error Handling

DBindly.init({
  apiUrl: 'https://api.dbindly.com',
  apiKey: 'pk_live_your_key',
  onError: (error) => {
    // Show user-friendly error message
    document.getElementById('error').textContent =
      'Failed to load content. Please refresh the page.';
 
    // Log to analytics
    analytics.track('DBindly Error', { error: error.message });
  }
});

Public API Methods

After initialization, you can use these methods:

// Load data by ID
const data = await DBindly.load('data-id');
 
// Fetch data without rendering
const data = await DBindly.fetchData('data-id');
 
// Fetch multiple items
const items = await DBindly.fetchBatch(['id1', 'id2', 'id3']);
 
// Fetch collection with pagination
const result = await DBindly.fetchCollection('products', {
  page: 1,
  limit: 20,
  sort: 'price',
  order: 'asc'
});
 
// Render collection
await DBindly.renderCollection('products', { limit: 10 });
 
// Clear cache
DBindly.clearCache();
 
// Get performance metrics
const metrics = DBindly.getMetrics();
console.log(metrics.cacheHitRate, metrics.averageLoadTime);

New in v2.3.0

// Show error messages
DBindly.showError('Something went wrong');
DBindly.showError('Invalid email', 'email'); // Field-specific
 
// Clear all errors
DBindly.clearErrors();
 
// Get form data from dbind_model inputs
const formData = DBindly.getFormData();
 
// Update data and re-render
DBindly.setData({ name: 'Jane', email: 'jane@example.com' });
 
// Check version
console.log(DBindly.version); // "2.3.0"

Events (v2.3.0)

// Two-way binding change
document.addEventListener('dbindly:model-change', (e) => {
  console.log(e.detail.field, e.detail.value);
});
 
// Click/submit action
document.addEventListener('dbindly:action', (e) => {
  console.log(e.detail.action, e.detail.data);
});
 
// Error occurred
document.addEventListener('dbindly:error', (e) => {
  console.log(e.detail.error, e.detail.field);
});

Next Steps

Basic Attributes - Learn the basic data attributes
List Rendering - Render arrays and collections