Knockout Custom Binding and Running a ViewModel Function

Question

I found a custom binding that makes an observable update in an editable div. I'm not able to run a function when an event occurs with it.

Does anyone know what I can do to my custom binding "editableText" run a function in my ViewModel?

I would like the function "nameChange" to run when text is changed.

HTML:

<div contenteditable="true" data-bind="event: { change: nameChange }, editableText: firstName"></div>

Javascript:

//Editable Text Custom Binding
ko.bindingHandlers.editableText = {
    init: function (element, valueAccessor) {
        $(element).on('blur', function () {
            var observable = valueAccessor();
            observable($(this).text());
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, data) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).text(value);
    }
};

//Knockout ViewModel
function viewModel(){
    var self = this;
    self.firstName = ko.observable();
    self.status = ko.observable();

    self.nameChange = function(){
        console.log("Name has been updated");
        ko.mapping.fromJS("Name has been updated", {}, self.status)
    }

    self.loadName = function(){
        ko.mapping.fromJS("hey", {}, self.firstName)
    }
}

var vm = new viewModel();
ko.applyBindings(vm);
vm.loadName();

JSFIDDLE: http://jsfiddle.net/madscientist1882/urLd2/

I'm afraid your question *might* be a dupe of [this one](http://stackoverflow.com/questions/7802784/listening-to-events-of-a-contenteditable-html-element): there are no (widely supported) events for ContentEditable elements. — Jeroen, Oct 20 '13 at 20:52
Check out this Kendo UI binding, its really nice if you need a KO enabled HTML editor http://rniemeyer.github.io/knockout-kendo/web/Editor.html — Anders, Oct 20 '13 at 21:59

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

How about subscribing to changes on the observable? (Look at explicitly subscribing to observables)

self.firstNameSubscription = self.firstName.subscribe(function (newValue){
  //do something
});

If you do this you need to dispose of the subscription when your view model goes down

self.firstNameSubscription.dispose();

If you want the observable to be updated every time a key is entered have a look here

My personal opinon is that using the variable name 'self' is probably a bad idea...

edited May 23 '17 at 11:50

Community

1
1

answered Oct 20 '13 at 22:39

Aran Mulholland

23,555
29
141
228

While using `self` as a *global* variable is obviously a bad idea, I don't see why using it as a *local* variable is. – ebohlman Oct 21 '13 at 01:29
@ebohlman As I said it is a personal opinion. However the reasoning this is based on is that it gets you into a bad habit, and it's easier to make a mistake and slip out of scope in Javascript than other languages. Why not avoid easily avoided mistakes? I would pick it up in a code review if my colleagues did it and make them change before check in. A lot of good Javascript programming practises are based on convention, I think this is one of those. – Aran Mulholland Oct 21 '13 at 04:15

Knockout Custom Binding and Running a ViewModel Function

1 Answers1