20

I have a hidden input and bind the value to an observable property of my model. I'm using another plugin that internally updates the value of that hidden input, however the observable doesn't update it's value.

How can i force the observable to update it's value from the element?

something like valueHasMutated but in the other way.

Thanks

Hugo Zapata
  • 4,314
  • 5
  • 29
  • 32
  • 1
    I solved the problem by creating a custom binding that updates the value of when the plugin changes the value. Basically it's the same techinique explained here: http://stackoverflow.com/questions/6612705/knockout-with-jquery-ui-datepicker – Hugo Zapata Aug 24 '11 at 02:30
  • excellent! If you can, you should answer this question with your solution and accept it so that way others who are having the same problem can see how you solved it. – Sean Vieira Aug 24 '11 at 04:17
  • @Hugo - you should post that as an answer...so it helps others finding this question in the future! – Nick Craver Aug 28 '11 at 12:18
  • Hi @Hugo Zapata it would be great if you could post your solution, as I've run into the same problem. Your fine answering your own questions in StackOverflow. – Alex KeySmith Sep 20 '11 at 18:17

2 Answers2

23

I realise you've already come up with a solution.

But I'd thought I'd post my own incase anyone comes across this, as it's up high in the Google results with no answers, so might come in useful for someone.

 ko.bindingHandlers.hiddenInputValue = {

        init: function (element, valueAccessor) {

            $(element).bind("change", function (event, data, formatted) { //hidden vars don't usually have change events, so we trigger $myElement.trigger("change");
                var value = valueAccessor();
                value($(this).val()); //rather than $(this).val(), might be best to pass our custom info in data
            });
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var value = valueAccessor();
            $(element).val(value);
        }

    };

And the html

<input type="hidden" name="myName"  id="myId"  data-bind="hiddenInputValue: myModelValue" >

Because hidden inputs don't have change events normally, you'll need to trigger your own event when ever you change the value e.g.

$("#myId").trigger("change");

I'm not sure if this is the best solution, but the best I could come with in the timescale I'm working to :-) I might put something into the knockout wiki if I come up with something more elegant.

Alex KeySmith
  • 16,657
  • 11
  • 74
  • 152
  • 1
    You can get most or all of this functionality using the built-in value handler (`data-bind="value: myObservable"` and the same trigger. – Matthew Flaschen May 15 '12 at 19:02
  • Maybe knockout has been updated since I posted this, the last time I checked because hidden inputs don't have a change event by default knockout couldn't work with the normal value binding. Does it work with the normal value binding now? – Alex KeySmith May 16 '12 at 08:17
  • 1
    Yes, it works in Knockout 2.0.0 (haven't tried this in older versions) but you still have to trigger the change manually. – Matthew Flaschen May 16 '12 at 14:43
  • I tried something based on your comments, whenever the value on the hidden input gets updated just trigger the "change" event manually on the hidden input and Knockout will do the rest (using data-bind="value: myObservable") – Sebastian Perez Jun 05 '12 at 15:32
  • Hi @Sebastian Perez sounds as though my custom hiddenInputValue isn't needed anymore in the new versions of knockout. Or perhaps I approached it the wrong way around realising I needed to trigger the change event after I created the custom binding :-) Never needing the cusotm binding in the first place - oh well :-) If I get a chance I'll try it on an old version. – Alex KeySmith Jun 06 '12 at 08:16
  • The change var value = ko.utils.unwrapObservable(valueAccessor()); required in update method to make knockout bind initial value as per http://stackoverflow.com/questions/8581668/knockout-custom-binding-does-not-show-initial-viewmodel-data-properly – xelibrion Jul 05 '12 at 07:23
12

It worked by adding $("hiddenInputId").trigger("change"); for my case without adding a ko binding handlers.

Thanks !

Mounir
  • 11,306
  • 2
  • 27
  • 34
  • 2
    This should be the accepted answer because most likely jQuery is being used to update the value of the hidden field. If another library is being used, then something similar done using that library would work. – Umar Farooq Khawaja Aug 30 '13 at 10:34