JSFiddle - React, Tailwind, and code Playground

by rniemeyer

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.js"></script>
<p>
  <label><input type="checkbox" data-bind="checked: StreamEnabled" /> Show Stream</label><br />
  <label>Channel: <input data-bind="value: Channel" /></label>
</p>

<p data-bind="if: StreamEnabled">
  <object width="320" height="240" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
    <param name="movie" data-bind="attr: { value: 'http://cdn.livestream.com/grid/LSPlayer.swf?channel=' + Channel() }"></param>
    <embed width="320" height="240" type="application/x-shockwave-flash" data-bind="cloneAndApplyAttr: { src: 'http://cdn.livestream.com/grid/LSPlayer.swf?channel=' + Channel() }"></embed>
  </object>
</p>

CSS

body {
    background-color: #eee;
}
object, embed {
    background-color: #fff;
}

JavaScript

ko.bindingHandlers.cloneAndApplyAttr = {
    update: function(element, valueAccessor) {
        var newNode = element.cloneNode(); //create a copy
        
        //apply the attr bindings to this node
        ko.applyBindingsToNode(newNode, { attr: valueAccessor() });
        
        //append the cloned node to the parent
        element.parentNode.appendChild(newNode);
        
        //remove the original
        ko.removeNode(element);
    }        
};

var ViewModel = function() {
    this.StreamEnabled = ko.observable(false);
    this.Channel = ko.observable("saltwatercams");
};

ko.applyBindings(new ViewModel());