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" data-bind="html: Template">
  </object>
</p>

CSS

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

JavaScript

ko.bindingHandlers.asyncAttr = {
    update: function(element, valueAccessor) {
        setTimeout(ko.bindingHandlers.attr.update.bind(this, element, valueAccessor), 0);
    }        
};

var ViewModel = function() {
    this.StreamEnabled = ko.observable(false);
    this.Channel = ko.observable("saltwatercams");
    this.Template = ko.computed(function() {
        return "<param name=\"movie\" value=\"" + this.Channel() + "\"></param><embed width=\"320\" height=\"240\" type=\"application/x-shockwave-flash\" src=\"http://cdn.livestream.com/grid/LSPlayer.swf?channel=" + this.Channel() + "\"></embed>";
    }, this);
};

ko.applyBindings(new ViewModel());