JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="http://knockoutjs.com/js/jquery.validate.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<form method="post">
<table >
<tbody data-bind='foreach: credentials'>
<tr>
<td>User: <input class='required' name='user' /></td>
</tr>
<tr>
<td>Pass: <input class='required' name='pass' /></td>
</tr>
</tbody>
</table>
<button type='submit'>Submit</button>
<button data-bind='click: reload'>Reload</button>
</form>
JavaScript
var CredentialModel = function(credentials) {
var self = this;
self.credentials = ko.observableArray(credentials);
self.save = function(form) {
alert("Could now transmit to server: " + ko.utils.stringifyJson(self.credentials));
// To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.gifts);
};
self.reload = function() {
self.credentials([
{ name: ""}
]);
}
};
var viewModel = new CredentialModel([
{ name: ""}
]);
ko.applyBindings(viewModel);
// Activate jQuery Validation
$("form").validate({ submitHandler: viewModel.save,
showErrors: function(errorMap, errorList) {
$.each( this.successList , function(index, value) {
$(value).popover('hide');
});
$.each( errorList , function(index, value) {
console.log(value.message);
var _popover = $(value.element).popover({
trigger: 'manual',
placement: 'right',
content: value.message,
template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content alert-error"><p></p></div></div></div>'
});
_popover.data('popover').options.content = value.message;
$(value.element).popover('show');
});
}
});