Skip to main content
100%

Minimal example of data handling in Backbone.js

✓ Published0🌍 Public
Aamundo
Last edited Nov 18, 2010
Created on Dec 18, 2011

This example demonstrates basic Backbone.js data binding and view updates using inline HTML input fields. It shows how models, collections, and views interact when editing text labels or adding new items, with a log panel displaying each sync operation. The code uses Backbone.Model, Backbone.Collection, Backbone.View, and Backbone.sync, along with jQuery for DOM manipulation and underscore.js templates for rendering. The fake sync method simulates server persistence by assigning temporary client IDs to newly created models.

AI-generated description

Similar vizzes

Loading thumbnail…

Simple Backbone WordPress Example

This example demonstrates a simple Backbone.js application that fetches and displays WordPress blog posts as a list. It shows how a collection retrieves data from the WordPress REST API endpoint and renders each post’s title, date, and content into a templated view. The code uses Backbone.Model, Backbone.Collection, and Backbone.View, along with Underscore.js templating and jQuery for DOM manipulation. The collection’s `parse` method extracts post fields from the API response, and the view’s `render` method appends each post as a list item.

FFasani
68% match
Loading thumbnail…

Gist 7f789f99d7069a4220ed

This example demonstrates a minimalist MVC architecture built with Cranium, a custom library that uses Underscore.js for utility functions and jQuery-like DOM selection. It shows how a model, view, and controller interact: user clicks on increment or alert buttons trigger controller methods, which update the model, and the view re-renders an Underscore template displaying the counter value. A separate todo example illustrates model changes notifying the view to re-render its checkbox and title template. The code relies on Cranium’s Events system for model-view communication and DOM event binding.

Aamundo
67% match
Loading thumbnail…

events

This example demonstrates how Backbone.js handles keyboard events within a textarea. Typing in the text field triggers a callback that logs a message to the browser console, showing event binding in action. The code defines a `PasteView` model that attaches `keyup`, `keydown`, and `keypress` handlers using Backbone’s `events` hash, with jQuery managing DOM interaction and Underscore providing utility functions like `bindAll`. No data source or rendering is involved—the focus is purely on event-driven interaction.

Aamundo
67% match
Loading thumbnail…

Select / CollectionView Backbone example

A Backbone.js example demonstrates how a dropdown select and a list view stay synchronized through model collections. The page shows a `<select>` element populated with items from a Backbone Collection, while a second collection drives an adjacent `<ul>` list. Selecting an option triggers a `change` event, adding the chosen model to the other collection, which re-renders the list via the `add` event listener. The code uses Backbone Views, Collections, and the `listenTo` API, with jQuery handling DOM updates and event binding.

Aakre54
66% 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
63% 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
63% match
Loading thumbnail…

trying to make a nested collection

This example shows a Backbone.js model for a single sentence, which is parsed from an external JSON file containing transcription, translation, and a list of words with morpheme and gloss data. The sentence model creates a nested collection of words, and the code defines a text collection that stores sentences using the Backbone.LocalStorage adapter. The application initializes by fetching a sentence from the data source and parsing its word components into the nested structure, though the visualization of this nested collection is not implemented in the provided code.

Aamundo
63% match
Loading thumbnail…

Gist 7657226

Cranium demonstrates a minimalist MVC implementation, showing how a model, view, and controller interact to update the DOM. The example uses Underscore.js for templating and utility functions, plus Cranium's own `Events`, `Model`, `View`, and `Controller` APIs. A counter model increments on button clicks, triggering the view to re-render its `<h1>` with the new value via `template` and `innerHTML`. A separate todo model demonstrates `set` and `get` with a checkbox, where a click event toggles completion and re-renders the view.

Aalessioalex
62% match