JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<voting params="votes: votes, yourVote: yourVote"></voting>
<template id="voting-tpl">
<div data-bind="click:function(){callback(1)}">Up</div>
<div data-bind="text: votes"></div>
<div data-bind="click:function(){callback(-1)}">Down</div>
</template>
JavaScript
ko.components.register('voting', {
viewModel: function(params) {
var self = this;
this.votes = params.votes;
this.yourVote = params.yourVote;
this.callback = function(num){
self.yourVote(parseInt(num));
self.votes( self.votes() + parseInt(num) );
};
},
template: { element: 'voting-tpl' }
});
function Vm(){
this.votes = ko.observable(5);
this.yourVote = ko.observable(0);
}
ko.applyBindings(new Vm() );