Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Knockout valueUpdate to work with editable div elements

I am using bootstrap wysiwyg editor to replace the textarea that is being databinded to a observable value from viewModel.

<textarea data-bind="html:data, valueUpdate:'afterkeydown'"></textarea>

The above textarea updates the corresponding viewModel value everytime a key is pressed from inside the textarea.

Now the text area is replaced by wysiwyg bootstrap editor

<div class="editor" data-bind="html:data, valueUpdate:'afterkeydown'"></div>

Now the the observable is not updated on keydown.

any idea how to make this work?

Creating a custom bindinghandler "htmlUpdate" to div tags, similar to valueUpdate that is working with input elements?

also that should support inline HTML, Any ideas about how to reuse the "valueUpdate" to work with div elements?

Here is the fiddle http://jsfiddle.net/cHTCq/

like image 642
Jagan K Avatar asked Aug 21 '13 07:08

Jagan K


People also ask

What is KnockoutJS value binding?

KnockoutJS - Value Binding. This binding is used to link respective DOM element's value into ViewModel property. Mostly, this is used with elements such as input, select, and textarea. This is similar to text binding, the difference being, in value binding data can be changed by the user and the ViewModel will update it automatically.

Does knockout support drop-down lists?

Knockout has special support for drop-down lists (i.e., <select> elements). The value binding works in conjunction with the options binding to let you read and write values that are arbitrary JavaScript objects, not just string values. This is very useful if you want to let the user select from a set of model objects.

Why should I use textinput instead of valueupdate in knockout?

If you are trying to bind an <input type="text" /> or <textarea> to get instant updates to your viewmodel, use the the textInput binding. It has better support for browser edge cases than any combination of valueUpdate options. Knockout has special support for drop-down lists (i.e., <select> elements).

What happens to old values in knockout when Edit Mode is canceled?

You can read more about custom bindings, value and binding accessors, and function arguments in the Knockout custom binding documentation. In our example, if edit mode is canceled, then old values (the values that were present before entering edit mode) must be restored.


Video Answer


1 Answers

Here is a simple binding to work with a contentEditable div like that and have it update as you type as well as when you click the formatting buttons:

ko.bindingHandlers.htmlValue = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var updateHandler = function() {
            var modelValue = valueAccessor(),
                elementValue = element.innerHTML;

            //update the value on keyup
            modelValue(elementValue);
        };

        ko.utils.registerEventHandler(element, "keyup", updateHandler);
        ko.utils.registerEventHandler(element, "input", updateHandler);
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()) || "",
            current = element.innerHTML;

        if (value !== current) {
            element.innerHTML = value;    
        }
    }
};

Here is your fiddle updated to use it: http://jsfiddle.net/rniemeyer/hp3K6/

like image 62
RP Niemeyer Avatar answered Oct 21 '22 07:10

RP Niemeyer