Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Sortable Array (gallery-sortable-array) on cdn

Last Updated: 06/3/11

+ 1 -

Amjad Masad

YUI Contributor

See 1 more by this user.

Created: 06/1/11
Last CDN Push: 06/8/11
Build Tag: gallery-2011.06.08-20-04
Project: YUI 3
License: YUI BSD
YUI Version: 3.3.0
Free for use.

Sortable Array

A plugin for YUI's Sortable widget that would allow for linking data between a JS array and the UI.
Any changes made to the rendered Sortable widget would be automatically reflected on the linked array,
changes may include sorting, adding, editing, deleting.

Furthermore the linking goes in two directions where appending items to the linked array would reflect on
the rendered Sortable widget. Any changes on the linked array should use the following methods so its
instantly reflected on the UI: .splice , .push , .pop

The plugin takes into consideration joined lists, and allows for data to be exchanged between multiple linked
arrays.

The linked array elements may consist of primitive JS types or Objects. When having an array of objects
you can pass into the plugin a config parameter specifying the observable property of the object.

The Sortable widget would start emitting "arraychange" events after the plugin has been deployed, which
means that the array changed somehow, e.newItem will contain a data member if a new one was
added to the array, where e being YUI's Event-facade

Examples: http://amasad.github.com/yui3-gallery/sortable.html

push, splice, pop methods on the linked array is shadowing the original methods and may
appear in a "for in" statement, I suggest using regular for looping on the array. Anytime you want to restore
the original shadowed methods use 'array.restore()' this would delete all augmented methods

TODO:
Use YUI's Datasource as the main array data source, to allow for remote data-sources

Linking a data array to a Sortable widget.

Code Sample

<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>

var data = [
		{
			title: 'Apple',
			color: 'red'
		},
		{
			title: 'Orange',
			color: 'orange'
		}
	];
 
YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2011.06.08-20-04'
}).use('gallery-sortable-array', function(Y) {
	var list = new Y.Sortable({
		container: '#list',
		nodes: 'li',
		opacity: '.1',
		moveType: 'move'
	});
 
        list.plug(Y.SortableArray, {
		dataArray: data,
		observable: 'title'
	});
 
});

Forum Posts

No forum posts for this module.