CODEWITHSUNDEEP
ember.js
blueFast
blueFast

Reputation: 44351

Updating a property is not visible in the DOM

I have the following drop-downs:

{{view SettingsApp.Select2SelectView
    id="country-id"
    contentBinding=currentCountries
    optionValuePath="content.code"
    optionLabelPath="content.withFlag"
    selectionBinding=selectedCountry
    prompt="Select a country ..."}}

...

{{view SettingsApp.Select2SelectView
    id="city-id"
    contentBinding=currentCities
    selectionBinding=selectedCity
    prompt="Select a city ..."}}

The bound properties are defined in a controller:

SettingsApp.ServicesEditController = SettingsApp.BaseEditController.extend(SettingsApp.ServicesMixin, {
    needs            : ['servicesIndex'],
    selectedCountry  : null,
    selectedCity     : null,
    currentCountries : null,
    currentCities    : null,
    init : function () {
        this._super();
    },
    setupController : function (entry) {
        this._super(entry);
        var locator = SettingsApp.locators.getLocator(this.get('content.properties.locator'));
        var countryCode = locator.get('country'), city = locator.get('city');
        this.set('currentCountries', SettingsApp.countries.getCountries());
        this.set('currentCities',    SettingsApp.locators.getCities(countryCode));
        this.set('selectedCountry',  SettingsApp.countries.getCountry(countryCode));
        this.set('selectedCity',     city);
        // Add observers now, once everything is setup
        this.addObserver('selectedCountry', this.selectedCountryChanged);
    },
    selectedCountryChanged: function () {
        var countryCode = this.get('selectedCountry.code');
        var currentCities = SettingsApp.locators.getCities(countryCode);
        var selectedCity = currentCities[0];
        this.set('currentCities', currentCities);
        this.set('selectedCity',  selectedCity);
    },
    ...
});

Initial setup is working fine, but changing the country selection does not update the city selection in the drop-down, even though the observer (selectedCountryChanged) is called and the this.set('selectedCity', selectedCity); is working as expected (as seen in console logging). The currentCities are properly set after the observer runs, but the active (selected) value is not correct (remains unchanged).

Are there any known issues with the programmatic update of bound properties, in this case selectionBinding?

My Select2SelectView is:

SettingsApp.Select2SelectView = Ember.Select.extend({
    prompt: 'Please select...',
    classNames: ['input-xlarge'],

    didInsertElement: function() {
        Ember.run.scheduleOnce('afterRender', this, 'processChildElements');
    },

    processChildElements: function() {
        this.$().select2({
            // do here any configuration of the
            // select2 component
            escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
        });
    },

    willDestroyElement: function () {
        this.$().select2('destroy');
    }

});

Upvotes: 0

Views: 133

Answers (1)

Dinesh
Dinesh

Reputation: 111

Check whether selected city is getting displayed by removing select2(replacing with normal select). If that's the case, selectionbinding has to be propagated to select2.

Upvotes: 1

Related Questions