Knockoutjs.com - Animated Transitions

http://knockoutjs.com/examples/animatedTransitions.html

by Nirmal Balasooriya

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div class='liveExample'> 
    
    <h2>Planets</h2>
    <p> 
        <label>
            <input type='checkbox' data-bind='checked: displayAdvancedOptions' />
            Display advanced options
        </label>
    </p>
     
    <p data-bind='fadeVisible: displayAdvancedOptions'>
        Show:
        <label><input type='radio' name="type" value='all' data-bind='checked: typeToShow' />All</label>
        <label><input type='radio' name="type" value='rock' data-bind='checked: typeToShow' />Rocky planets</label>
        <label><input type='radio' name="type" value='gasgiant' data-bind='checked: typeToShow' />Gas giants</label>
    </p>
     
    <div data-bind='template: { foreach: planetsToShow,
                                beforeRemove: hidePlanetElement,
                                afterAdd: showPlanetElement }'>
        <div data-bind='attr: { "class": "planet " + type }, text: name'> </div>
    </div>
     
    <p data-bind='fadeVisible: displayAdvancedOptions'>
        <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>
    
</div>
<div class="MyExample">
  <div data-bind='fadeVisible: displayMyPanel'>
    <p>
        <input type='radio' name='option' value="SL" data-bind='checked: initOption'/><label >Sri Lanka </label>
        <input type='radio' name='option' value="SG" data-bind='checked: initOption'/><label >Singapore </label>
        <input type='radio' name='option' value="All" data-bind='checked: initOption'/><label >All countries </label>
    </p>
    <p class='myDec'>
        <label data-bind="text:initOption"></label>
    </p>
  </div>
</div>

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: 0.4em; }

.planet { background-color: #AAEECC; padding: 0.25em; border: 1px solid silver; margin-bottom: 0.5em; font-size: 0.75em; }
.planet.rock { background-color: #EECCAA; }
.liveExample input { margin: 0 0.3em 0 1em; }

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

.MyExample { padding: 1em; background-color: #777111; border: 1px solid #CCC; max-width: 655px; }
.myDec{ padding: 1em; border: 1px; background-color: #888555;}

JavaScript

var PlanetsModel = function() {
    this.planets = ko.observableArray([
        { name: "Mercury", type: "rock"},
        { name: "Venus", type: "rock"},
        { name: "Earth", type: "rock"},
        { name: "Mars", type: "rock"},
        { name: "Jupiter", type: "gasgiant"},
        { name: "Saturn", type: "gasgiant"},
        { name: "Uranus", type: "gasgiant"},
        { name: "Neptune", type: "gasgiant"},
        { name: "Pluto", type: "rock"}
    ]);
 
    this.typeToShow = ko.observable("all");
    this.displayAdvancedOptions = ko.observable(false);
    this.addPlanet = function(type) {
        this.planets.push({
            name: "New planet",
            type: type
        });
    };
 
    this.planetsToShow = ko.computed(function() {
        // Represents a filtered list of planets
        // i.e., only those matching the "typeToShow" condition
        var desiredType = this.typeToShow();
        if (desiredType == "all") return this.planets();
        return ko.utils.arrayFilter(this.planets(), function(planet) {
            return planet.type == desiredType;
        });
    }, this);
 
    // Animation callbacks for the planets list
    this.showPlanetElement = function(elem) { if (elem.nodeType === 1) $(elem).hide().slideDown() }
    this.hidePlanetElement = function(elem) { if (elem.nodeType === 1) $(elem).slideUp(function() { $(elem).remove(); }) }
    
    this.displayMyPanel = ko.observable(true);
    
    this.initOption = ko.observable('SG');
    
    //this.selected = ko.observableArray(['All']);
    //this.countryToShow = ko.computed(function() {
        // Represents a filtered list of planets
        // i.e., only those matching the "typeToShow" condition
        //this.initOption = this.initOption();
        //this.initOption = ko.observableArray(['SL']);
    //}, this);
};
 
// Here's a custom Knockout binding that makes elements shown/hidden via jQuery's fadeIn()/fadeOut() methods
// Could be stored in a separate utility...