JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<div>
<table>
<tr onclick="show();">
<td class="cell" data-bind="style: { background: $root.color }">Click to open</td>
</tr>
</table>
</div>
<div style="display:none;" id="hiddenDiv">
<table data-bind="with: someProperty">
<tr onclick="hide();">
<td class="cell" data-bind="text:message, style: { background: $root.color }"></td>
</tr>
</table>
</div>
<input type="button" value="Color cells" onclick="colorCells()" />
JavaScript
function show() {
vm.someProperty(vm.list[1]);
$("#hiddenDiv").fadeIn("slow");
}
function hide() {
$("#hiddenDiv").fadeOut("slow");
}
function colorCells() {
// $(".cell").css("background-color", "Yellow");
vm.color("Yellow");
}
function ViewModel() {
this.list = [new SubModel("item 1"), new SubModel("item 2")];
this.someProperty = ko.observable(this.list[0]);
this.color = ko.observable();
}
function SubModel(msg) {
this.message = msg;
}
var vm = new ViewModel();
$(function () {
ko.applyBindings(vm);
});