JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://deploy.testbruno.managebuilding.com/Manager/js/combinedSkin.js"></script>
<div id="test">
<input type="text" data-bind="numericValue: NumberUnits" />
<div data-bind="template: { if: NumberUnits() > 4, afterRender: function() { alert('test') } }">
<input type="text" data-bind="value: NumberUnits" />
</div>
</div>
JavaScript
var handlerBuilder = function(name, originalHandler, pattern, patternSuffixReader, valueParser, valueModifier, elementInit) {
// name - name of the handler
// originalHandler - the original handler to be called when a value is updated
// pattern - the pattern used to format the value
// patternSuffixReader - function that reads the pattern suffix from the data binding settings
// valueParser - function that parses an entered value and saves it to the model
// elementInit - function called on initialization to initialize the elements where the binding is applied
var h = {};
if (valueParser) {
// editable element
h.init = function(element, valueAccessor, allBindingsAccessor) {
var eventsToCatch = ["change", "afterkeydown"];
var requestedEventsToCatch = allBindingsAccessor()["valueUpdate"];
if (requestedEventsToCatch) {
eventsToCatch = [];
if (typeof requestedEventsToCatch === 'string') // Allow both individual event names, and arrays of event names
requestedEventsToCatch = [requestedEventsToCatch];
ko.utils.arrayPushAll(eventsToCatch, requestedEventsToCatch);
eventsToCatch = ko.utils.arrayGetDistinctValues(eventsToCatch);
}
$(element).on('focus', function() {
var self = this;
setTimeout(function() {
self.select();
}, 0);
});
$(element).on('blur', function() {
if (!$(this).hasClass('error')) {
var observable = valueAccessor();
var elementValue = ko.selectExtensions.readValue(this);
if (elementValue) {
observable(valueParser(elementValue));
observable.valueHasMutated();
}
}
});
if (typeof(elementInit) ===...