JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<link rel="stylesheet" href="http:////netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<body>
<div id="container">
<a data-toggle="modal" href="#myModal" class="">Feedback</a>
<!-- Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Give it to us straight.</h4>
</div>
<div class="modal-body">
<div id="buttonList" class="btn-group">
<button type="button" class="btn btn-large btn-danger" data-bind="click: updateFeedbackType"><i class="icon-frown icon-2x"></i>
<br />
<span class="elementText">Problem</span></button>
<button type="button" class="btn btn-large btn-primary" data-bind="click: updateFeedbackType"><i class="icon-question icon-2x"></i>
<br />
<span class="elementText">Question</span></button>
<button type="button" class="btn btn-large btn-warning" data-bind="click: updateFeedbackType"><i class="icon-lightbulb icon-2x"></i>
<br />
<span...
JavaScript
// Code goes here
var global_loggedOnUser = "User1";
$(function(){
var viewmodel = (function(){
this.feedbacktype = ko.observable("None");
this.currentPage = ko.observable(location.href);
this.currentUsername = global_loggedOnUser;
this.updateFeedbackType = function(item, event)
{
var newText = $(event.target).children("span").text();
feedbacktype(newText);
};
return{
pageUserIsOn : currentPage,
theUser : currentUsername,
feedbackType: feedbacktype
};
})();
ko.applyBindings(viewmodel);
});