JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<span data-bind="myText: myValue"></span><br/>
<button data-bind="click: changeValue">change value</button>
JavaScript
ko.bindingHandlers.myText = {
update: function(element, valueAccessor, allBindings) {
var myTextBindedTo =
$(element).attr('data-bind')
.match(/myText:\s*([0-9A-Za-z_$]*)/)[1];
//regular expression isn't perfect
//see http://stackoverflow.com/questions/2008279/validate-a-javascript-function-name
console.log(myTextBindedTo);
console.log(allBindings.get('myTextBindedTo'));
$(element).text(ko.unwrap(valueAccessor()));
}
}
ko.bindingHandlers.myText.preprocess = function(value, name, addBindingCallback) {
if (typeof(value) !== 'undefined') {
addBindingCallback('myTextBindedTo', "'" + value.replace(/['\\]/g, "\\$&") + "'");
}
return value;
}
function MyViewModel() {
var self = this;
self.myValue = ko.observable(1);
self.changeValue = function() {
self.myValue(self.myValue() + 1);
}
}
$(document).ready(function () {
ko.applyBindings(new MyViewModel());
});