0

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.

JotaBe
  • 38,030
  • 8
  • 98
  • 117
Maxim V. Pavlov
  • 10,303
  • 17
  • 74
  • 174
  • 2
    I don't know of a pre-existing binding out there that already does this for you. However, 35:16 into the video from this post http://www.knockmeout.net/2012/08/thatconference-2012-session.html, I demonstrated how to create a very similar binding. It would just need a few tweaks to use an "edit" button rather than just toggling between a link and an input. – RP Niemeyer Aug 29 '12 at 00:04

2 Answers2

0

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 };
        }
Anders
  • 17,306
  • 10
  • 76
  • 144
0

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 :)

Nukey
  • 326
  • 3
  • 10