Skip to main content
100%

Select / CollectionView Backbone example

✓ Published0🌍 Public
Aakre54
Last edited Oct 30, 2013
Created on Oct 29, 2013

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Chaplin dropdown

This example demonstrates a multi-select dropdown interface built with Backbone.js and jQuery, showing how users can filter, select, and clear items from a list. The code includes a typeahead input for filtering, checkbox toggles for selecting multiple entries, and a clear-all button. It uses Backbone views and collections, with event handling for selection state changes and filtering callbacks. The dropdown also supports a threshold for limiting visible items, though infinite scroll behavior is only described in a test comment.

Aakre54
69% match
Loading thumbnail…

Minimal example of data handling in Backbone.js

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.

Aamundo
66% match
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
61% 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
59% match
Loading thumbnail…

TestBug

This example demonstrates an interactive select dropdown component built with Ember.js. The component, defined in `components.select-dropdown.js`, maintains a bound `value` property and synchronizes it with the selected `<option>` element using observers and the `didRender` lifecycle hook. It supports plain string arrays or objects with `value` and `label` keys, with an optional empty default option. The application controller supplies a static `dropdownOptions` list, and the template renders the dropdown with a bound selection. The code relies on Ember’s component lifecycle methods (`didReceiveAttrs`, `didInsertElement`, `didRender`) and the `change` event handler to propagate user selections back to the controller.

FFrozenfire92
57% 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
56% 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
56% match
Loading thumbnail…

Collapsible List 2

This example demonstrates a collapsible list that expands and collapses nested tree data on click. It uses d3’s `select`, `selectAll`, `data`, `enter`, and `append` methods to bind an array of objects (with “Letter” and “Number” parent nodes) to HTML `li` elements inside a `ul`. Clicking a parent toggles its child items by adding or removing a nested `ul` via event handlers `expand` and `collapse`. The visualization relies on D3’s data join to manage the dynamic list structure.

BBenjamin Ogorek
55% match