Knockoutjs.com - Animated Transitions with jQuery Quicksand (Latest Dependencies)

https://github.com/wimpyprogrammer/knockout-quicksand

by wimpyprogrammer

HTML

<script src="//cdn.jsdelivr.net/quicksand/1.4/jquery.quicksand.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<div class='liveExample'> 
    
    <p>
        This fiddle is based on the Knockout animated transitions tutorial at <a href="http://knockoutjs.com/examples/animatedTransitions.html">http://knockoutjs.com/examples/animatedTransitions.html</a> with the following customizations:
        <ul>
            <li>Removed the jQuery fade effects that were showcased in the original.</li>
            <li>Added custom bindings for <b>quicksand</b> and <b>quicksandTemplate</b>.</li>
            <li>Updated the Add buttons to assign a unique name to the new planet.</li>
            <li>Updated output to add a <b>data-id</b> attribute per <a href="http://razorjack.net/quicksand/docs-and-demos.html">the Quicksand instructions</a>.</li>
            <li>Repeated UI elements to demonstrate various usage options.</li>
        </ul>
        <br />
        The plugin is versioned at <a href="https://github.com/wimpyprogrammer/knockout-quicksand">https://github.com/wimpyprogrammer/knockout-quicksand</a>.
        
    </p>
    
    <hr />
    
    <h2>Planets</h2>
     
    <p>
        Show:
        <label><input type='radio' name="typeTop" value='all' data-bind='checked: typeToShow' />All</label>
        <label><input type='radio' name="typeTop" value='rock' data-bind='checked: typeToShow' />Rocky planets</label>
        <label><input type='radio' name="typeTop" value='gasgiant' data-bind='checked: typeToShow' />Gas giants</label>
    </p>
    
    <p>
        <button data-bind='click: addPlanet.bind($data, "rock")'>Add rocky planet</button>
        <button data-bind='click: addPlanet.bind($data, "gasgiant")'>Add gas giant</button>
    </p>
    
    <h2>Foreach equivalent</h2>
    <div data-bind="quicksand: { data: planetsToShow, options: { duration: 1000 } }">
    <!-- Or if no options: <div data-bind='quicksand:...

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 1em; margin-bottom: 0.5em; clear:both }

.planet { background-color: #AAEECC; padding: 0.25em; border: 1px solid silver; margin-bottom: 0.5em; font-size: 0.75em; width:200px;height:20px;float:left;margin-right:5px;overflow:hidden;}
.planet.rock { background-color: #EECCAA; }
.liveExample input { margin: 0 0.3em 0 1em; }

li { list-style-type: disc; margin-left: 20px; }

JavaScript

ko.bindingHandlers.quicksand = {
    /**
     * Create the hidden working space to facilitate the Quicksand animation.
     * 
     * @param Element element  The DOM element with the KnockoutJS data bind.
     * @param jQuery $repeatingElements  The HTML used to render each array element.
     * @return jQuery  The Quicksand working space.
     */
    createWorkspace: function(element, $repeatingElements) {
        // Generate a unique ID for the DOM element that will facilitate the Quicksand animation.
        var quicksandWorkspaceId = 'ko-quicksand-' + (new Date).getTime();
        // Store the unique ID for reference during the "update" event.
        ko.utils.domData.set(element, 'ko-quicksand-workspace-id', quicksandWorkspaceId);
        
        // Look up the outermost element type in the rendering template and store it for reference during the "update" event.
        ko.utils.domData.set(element, 'ko-quicksand-container-tag', $repeatingElements[0].tagName);
        
        // Create the hidden DOM element that will facilitate the Quicksand animation.
        var $quicksandWorkspace = jQuery('<div/>', {
            id: quicksandWorkspaceId,
            style: 'display: none'
        });
        // Append it to the DOM for use during the "update" event.
        $quicksandWorkspace.appendTo('body');
        
        return $quicksandWorkspace;
    },
    /**
     * Get the hidden working space used to facilitate the Quicksand animation.
     * 
     * @param Element element  The DOM element with the KnockoutJS data bind.
     * @return jQuery  The Quicksand working space.
     */
    getWorkspace: function(element) {
        // Retrieve the hidden DOM element created during "init".
        return jQuery('#' + ko.utils.domData.get(element, 'ko-quicksand-workspace-id'));
    },
    /**
     * Get the name of the HTML tag that encompasses each array element.
     * 
     * @param Element element  The DOM element with the KnockoutJS data bind.
     * @return...