JSFiddle - React, Tailwind, and code Playground

by Cristian Trifan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-debug.js"></script>
<script src="https://rawgit.com/Knockout-Contrib/Knockout-Validation/master/Dist/knockout.validation.js"></script>
<div>
    Click on inputs and look at console.<br/>
    <input size="2" maxlength="2" data-bind="value: prop1"/> is in VM context
    <div data-bind="validationOptions: { decorateElement: true}">
        <input size="2" maxlength="2" data-bind="value: prop2"/> context is lost
    </div>
</div>

JavaScript

// Switch value to false and click inside inputs (Check the console);
ko.validation.init({decorateInputElement: true});

function VM( ){    
    this.prop1 = ko.observable(1).extend({digit: true});
    this.prop2 = ko.observable(2).extend({digit: true});   
}

ko.applyBindings(new VM());

var elements = document.querySelectorAll('input');
for (var i = 0; i < elements.length; i++) {
    (function(el) {
        el.addEventListener('click', function() {
            console.log('Context: ', ko.contextFor(this));
        });
    })(elements[i]);
}