ko comment binding

by Jorge Bustos Pereda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<input type="text" data-bind="value: aComment"></div>

<!--ko comment: aComment --><!-- /ko -->

JavaScript

// Creating a virtual element for comment
ko.bindingHandlers['comment'] = {
    'init': function(elem, valueAccessor) {
        // Get the value form the value accessor
        var value = ko.unwrap(valueAccessor());
        // Creates a comment element using jQuery
        var comment = $('<!--'+value+'-->')[0];
        // Replaces the children of the virtual (or real) element with the comment
        ko.virtualElements.setDomNodeChildren(elem, [comment]);
    },
    'update': function (elem, valueAccessor) {
        var value = ko.unwrap(valueAccessor());
        var comment = $('<!--'+value+'-->')[0];
        ko.virtualElements.setDomNodeChildren(elem, [comment]);
    }
};

// This allows the comment binding to be used as a virtual element
ko.virtualElements.allowedBindings.comment = true;

// Sample code
var vm = {
    aComment: ko.observable("This is a comment")
}

ko.applyBindings(vm);

// NOTE: unfortunately the virtual element binding comment will not dissapear