backbone.marionette

import { Application, Region, ItemView } from 'backbone.marionette'; import Backbone from 'backbone'; import _ from 'underscore'; // 1. Create a simple ItemView to display content const MyItemView = ItemView.extend({ template: _.template('<h1>Hello, <%= name %>!</h1><p>This is a Marionette ItemView.</p>'), className: 'my-item-view bg-blue-100 p-4 rounded-md shadow-sm', initialize(options) { this.model = new Backbone.Model({ name: options.name || 'World' }); console.log('ItemView initialized for:', this.model.get('name')); }, onRender() { console.log('MyItemView rendered with name:', this.model.get('name')); } }); // 2. Create a Marionette Application instance const MyApp = Application.extend({ // Define a default region for the application to render into region: { el: '#app-hook', replaceElement: true // Replace the target element with the application's view }, onStart() { console.log('Marionette Application started!'); // Show an initial view in the main region this.showView(new MyItemView({ name: 'Marionette User' })); // Demonstrate updating the view after a short delay setTimeout(() => { console.log('Updating view after 2 seconds...'); this.showView(new MyItemView({ name: 'Updated User' })); }, 2000); }, // Application-level events can be handled here onBeforeStart() { console.log('Application is about to start...'); } }); // 3. Ensure the DOM element exists before starting the app document.addEventListener('DOMContentLoaded', () => { const appContainer = document.createElement('div'); appContainer.id = 'app-hook'; document.body.appendChild(appContainer); // 4. Instantiate and start the application const myApp = new MyApp(); myApp.start(); });