JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script id="mediaPlayerTemplate" type="text/template">
<img src=${url} />
</script>
<div data-bind="template: {name: 'mediaPlayerTemplate', foreach: mediaPlayer}, cycle: { fx: 'scrollUp', timeout: 1000, speed: 500 }, cycleLinked: mediaPlayer">
</div>
JavaScript
ko.bindingHandlers.cycle = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
$element = $(element);
var options = ko.utils.unwrapObservable(valueAccessor()) || {};
//console.log('cycle_init');
var _starting = false;
var _cycle = function() {
if(_starting) return;
_starting = true;
//console.log('cycle_create');
$element.hide();
setTimeout(function() { $(element).cycle(options); $element.show(); _starting = false; }, 0);
};
var subscription = allBindingsAccessor().cycleLinked.subscribe(_cycle);
//handle disposal
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
//console.log('cycle_destroy');
$element.cycle("destroy");
subscription.dispose();
});
_cycle();
}
};
var testData = [{
url: "http://cloud.github.com/downloads/malsup/cycle/beach1.jpg"},
{
url: "http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"}];
var appViewModel = {
mediaPlayer: new ko.observableArray(testData)
};
ko.applyBindings(appViewModel);
setTimeout(function() {
appViewModel.mediaPlayer.push({url: "http://cloud.github.com/downloads/malsup/cycle/beach3.jpg"});
appViewModel.mediaPlayer.push({url: "http://cloud.github.com/downloads/malsup/cycle/beach4.jpg"});
}, 5000);