Toss Across - tsgrp/HPI GitHub Wiki

Instead of using a variety of different knockback, knockout, and manual toss-acrosses, there is now a module for creating Backbone-driven toss acrosses.

This module, as of now, solves a few recurring problems:

• long lists of items now scroll
• can filter on long lists
• multiple targets - a single list can have multiple destinations

Here's what an instantiation looks like:

var test = new TossAcross.Layout({
	srcCollection: {
		title: 'Source',
		filter: true,
		labelAttr: 'label',
		collection: new Backbone.Collection([{label: "Search"}, 
			{label: "Collections"}, 
			{label: "Dashboard"}, 
			{label:"Admin"}
		])
	},
	targetCollections: [
		{
			title: 'Target',
			labelAttr: 'label',
			collection: new Backbone.Collection([{label:"Batch Records"}])
		},
		{
			title: 'Other',
			filter: true,
			labelAttr: 'label',
			collection: new Backbone.Collection()
		}
	]
});
//tossacross is just a backbone view
this.setView('.header-links-tossacross', test);

###How To Use###

It is expected that the Backbone.Collection you pass in has already gone through asny transformations before you pass it into tossacross. Once you are done sorting and selecting your items, the collections you passed in reflect the changes you've made in tossacross. A Backbone fetch/sync will save the changes to the server.

srcCollection: There is one source collection. Each model must at least have a single field (the field that's displayed)

---

####Required Attributes####

title: Header displayed for each list (defaults to 'Collection').

labelAttr: Tossacross won't modify your collection. Instead one specifies a labelAttr to tell TossAcross which attribute to display.

collection: the Backbone.Collection you are usiing as a source. Right now, basic arrays arn't supported.

####Optional Attributes####

filter: filter box based on the labelAttr field (defaults to false).

valueAttr: In addition to the displayAttr, you can specify a valueAttr for extending other project-specific functionality.

#####Global Attributes#####

enableAddRemove: This creates left and rights arrows that act as add/remove actions between the collections.

clickAcross: Disables tossing across elements and allows for clicking and moving elements, rather thend ragging them.

Note:

clickAcross only works if there is a single source collection and a single target collection. Multiple target collections will cause unintended behavior.

---

targetCollections: A list of target collections. Each one has the same attributes and methods (specified above) as a source collection.

###Customizations###

Because Tossacross is just a backbone view, feel free to put it in a button drop down, modal, etc.