Knockoutjs.com - Hello World Example

http://knockoutjs.com/examples/helloWorld.html

by stevenkaspar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/core.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-debug.js"></script>
<div class='liveExample' id='id'> 
    <textarea data-bind='ojTextCounter: {max: 10, display_count: true}'></textarea>
</div>

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

JavaScript

// Here's my data model
var ViewModel = function() {

    function insertAfter(newNode, referenceNode) {
        referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    }
	ko.bindingHandlers.ojTextCounter = {
        init: function(element, ValueAssessor){ 
            var props = ValueAssessor();
            console.log(props);
            element.maxLength = props.max;
            if(props.display_count){
                var line_break = document.createElement('br');
                var counter = document.createElement('span');
                counter.innerHTML = element.value.length;
                element.addEventListener('input', function(event){
                    counter.innerHTML = event.target.value.length;
                })
                insertAfter(line_break, element);
                insertAfter(counter, line_break);
            }
        }
    }
};

ko.applyBindings(new ViewModel(), document.getElementById('id')); // This makes Knockout get to work