Editable string knockoutJS custom binding

Question

I often display text data on the web page that I need to change.

Currently, I write a custom mouseEvent handlers to show an "edit" button pop over a div with an observable-bound span is moused over. If a user clicks it, I hide a span via visible knockoutJS binding and show a text input to allow edit. On tab I save edit changes and show an updated span again.

Is there a custom open-source KOJS binding that would encomprise all this functionality. I am not asking to write it for me, just point to it, since the task is very common and KO seems to have a good base to implement it elegantly.

Answer 1

Is your question how to use strings as source for the template engine? If so I've done that for one of my bindings

https://github.com/AndersMalmgren/Knockout.Bindings/blob/master/src/knockout.bindings.js

The relevant code from my repo

var stringTemplateSource = function (template) {
    this.template = template;
};

stringTemplateSource.prototype.text = function () {
    return this.template;
};

var stringTemplateEngine = new ko.nativeTemplateEngine();
stringTemplateEngine.makeTemplateSource = function (template) {
    return new stringTemplateSource(template);
};

And to use it

ko.bindingHandlers.myCustomBinding = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            ko.renderTemplate('<span data-bind="text: $data"></span>', bindingContext.createChildContext(valueAccessor()), { templateEngine: stringTemplateEngine }, element, "replaceChildren");

            return { controlsDescendantBindings: true };
        }

Answer 2

Actually, there is something like this, and it even looks awesome.

https://github.com/brianchance/knockout-x-editable

See it in action here: http://vitalets.github.io/x-editable/demo-bs3.html

Hope to help :)