Skip to main content
100%

Home

✓ Published0🌍 Public
Aabernier
Last edited Oct 4, 2013
Created on Jul 26, 2012

This example demonstrates client-side routing with Backbone.js, using a single-page application structure to navigate between a home page and a product page. It shows how links trigger route changes and template swapping without full page reloads, with alerts confirming each navigation event. The code loads jQuery, Underscore, and Backbone, then initializes Backbone’s router and history API with pushState to handle URL transitions. Templates embedded in the HTML are written into the body on route changes, and anchor links for in-page scrolling are preserved while other links are intercepted.

AI-generated description

Similar vizzes

Loading thumbnail…

routing

This example demonstrates a simple client-side router built with Meteor and a custom router object. It maps URL paths to templates, such as "/" to a hello template and "/test" to a test template, using the `Template.dynamic` helper to render the matching template. The router tracks URL changes via `window.onpopstate` and `window.onhashchange`, while a `Deps.Dependency` object triggers reactive updates in Meteor helpers. It also extracts URL parameters by splitting the remaining path segments, showing a basic approach to routing without external libraries.

Aandrewfulrich
67% match
Loading thumbnail…

Untitled

This example demonstrates a single-page reference guide for Chrome DevTools, organized into sections covering the Network tab, Console, Debugger, and common error-handling practices. It uses the `routie` hash router to map URL fragments to corresponding sections, logging each route change to the browser console via `console.log`. The page is built with plain HTML and vanilla JavaScript, featuring anchor links for navigation and a "Back to top" link for each section.

LLaurens
64% match
Loading thumbnail…

Gist 4632462

This example demonstrates how to turn a traditional multi-page website into a smooth, AJAX-driven single-page experience using the HTML5 History API. It shows the process of intercepting internal link clicks, fetching new page content via jQuery’s `$.ajax`, and dynamically replacing the page’s content and document title without a full reload. The implementation relies on History.js for state management, jQuery selectors to identify content and menu regions, and the optional jQuery ScrollTo plugin to animate scrolling after content updates. The readme documents installation steps and explains the state-change workflow.

TThanad
64% match
Loading thumbnail…

sketch

This example presents a step-by-step navigation interface where clicking a link updates the active step label. The page uses jQuery to handle the click events and a custom router function with `setInterval` to detect hash changes and synchronize the highlighted list item. The rendering approach is a simple HTML ordered list with CSS styling for the active state, and the code relies on Google's AJAX API loader to load jQuery. No data visualization or animation is shown beyond the step highlighting.

DDylanFM
63% match
Loading thumbnail…

Gist 83eee1cf3c019a0fa43d

This example demonstrates a minimal carousel component built with Backbone.View, jQuery, and Lodash. The view manages a list of items, tracking the active and previous indexes while allowing navigation via prev/next buttons or direct method calls like `go(2)` and `next(3)`. It applies CSS classes such as `active`, `previous`, `forward`, and `backward` to reflect state changes, and triggers a `carouselchange` event whenever the current item changes. The code supports optional looping, configurable step sizes, and explicit selection of item and navigation elements via the `el`, `items`, `prev`, and `next` options.

Aabernier
62% match
Loading thumbnail…

Gist b5b1465342d4885de179

This animated visualization demonstrates a carousel interface built with Backbone.js, where items cycle through views with smooth transitions. The code uses a Backbone View to manage carousel behavior, including previous/next navigation controls and automatic item rotation. The animation renders the carousel's items dynamically, updating the active element as users interact with the controls. The visualization relies on jQuery for DOM manipulation and Underscore for utility functions, with the Backbone framework providing the structural foundation for the view logic.

Aabernier
62% match
Loading thumbnail…

Js app without modules

This example demonstrates a two-level single-page application without any module system, using plain JavaScript and XMLHttpRequest. Clicking a todo item in the overview renders its detail view, and clicking the detail title returns to the list. The app routes between overview and detail states via object-literal methods for routing, API calls, and rendering, fetching data from the JSONPlaceholder API. Global state is limited to a few object literals, with the DOM fully rebuilt on each render.

LLaurens
60% match
Loading thumbnail…

Js app without modules

This example demonstrates a two-level single-page application without any module system, using plain JavaScript and XMLHttpRequest. Clicking a todo item in the overview renders its detail view, and clicking the detail title returns to the list. The app routes between overview and detail states via object-literal methods for routing, API calls, and rendering, fetching data from the JSONPlaceholder API. Global state is limited to a few object literals, with the DOM fully rebuilt on each render.

LLaurens
60% match