I have Created custom component with select drop down when I select an option and alert the select option it spits out :

 function observable() {
          if (arguments.length > 0) {
             // Write

             // Ignore writes if the value hasn't changed
        if (observable.isDifferent(_latestValue, arguments[0])) {
            _latestValue = arguments[0];
            if (DEBUG) observable._latestValue = _latestValue;
        return this; // Permits chained assignments
    else {
        // Read
        ko.dependencyDetection.registerDependency(observable); // The caller only needs to be notified of changes if they did a "read" operation
        return _latestValue;

I have :

availableCountries : ko.observableArray(['--Please Select--', 'France', 'Germany', 'Spain']), chosenCountries : ko.observableArray(['--Please Select--']),

I can display just fine like so:

<span data-bind="text: chosenCountries"></span>

I can push from my function just fine like so:

this.availableCountries.push('New item')

BUT I CAN'T from my function




it spits the the observable function above!

UPADTE: I did console.log(this.availableCurrencies._latestValue); and it gives me the previous value how to get currnetValue?

Full js component :

    function (Component, $, stepNavigator, quote, ko) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Magento_Checkout/view/summary/country'
            availableCountries : ko.observableArray(['--Please Select--', 'France', 'Germany', 'Spain']),
            chosenCountries : ko.observableArray(['--Please Select--']),
            initialize: function () {
                return this;
            getCountry:function (data, event) {


and country.html:

    <select data-bind="event:{ change: getCountry}, options: availableCountries, selectedOptions: chosenCountries"></select>
    <span data-bind="text: chosenCountries"></span>


enter image description here enter image description here Anyone nay help please!Appreciate

2 Answers 2


It looks like you need to add parenthesis like so:


Without the parenthesis you will only log the function, and to set the observable you add content inside the parentheis like this:

this.testObservable('New value');
  • Thank's The same this tried with parentheses it gives me the previous value how do i get the current ? May 18, 2018 at 15:59
  • this.availableCurrencies() always should be the current, if you're getting the wrong value it's usually when you're setting the value outside of KO like this.availableCurrencies = whatever. I think the issue is around the usage of _latestValue - As far as I'm aware you shouldn't really use this. All my uses have been: - this.getObservableTest(); - this.setObservableTest(newValue);
    – Ben Crook
    May 18, 2018 at 16:05
  • It doesn't seen to give the current value I've update with full code perhaps you can spot something worng? May 18, 2018 at 16:23
  • There is a typo here - console.log(this.chosenCoutries());. This should be console.log(this.chosenCountries());. Does fixing that change anything?
    – Ben Crook
    May 18, 2018 at 16:27
  • 1
    I've manage to get the current value by adding timeout,@Ben Crook It works if I add a timeout: setTimeout(function(){ console.log(data. chosenCountries()); }, 1000); Thank's for you help! May 18, 2018 at 16:47

To make sure to get the newly selected value instead of the previous value you have to modify your knockout template:

<select data-bind="event:{ input: getCountry}, valueUpdate: 'input', options: availableCountries, selectedOptions: chosenCountries"></select>

This is because the getCountry function was called before the chosenCountries observable was updated with the new value. This is the default behaviour of the change event in Knockout.js. With the input change event it works as expected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.