mardi 25 août 2015

Ember component property not being set on change listener

Hello I have a radio input component below, Now the issue I'm having is the property "value" is not being updated via the "radios" change function below. I log it and I get the updated value but it isn't being set so that if I can "this.get('value')" it doesn't yield the latest set value. Any help would be appreciated.

export default Ember.Component.extend({

// -------------------------------------------------------------------------
// Dependencies

// -------------------------------------------------------------------------
// Attributes

/** @type {String[]} */
attributeBindings: [
    'disabled'
],

/** @type {String[]} */
classNames: [
    'form-group',
    'sl-radio-group'
],

/** @type {Object} */
layout,

/** @type {String} */
tagName: 'fieldset',

// -------------------------------------------------------------------------
// Actions

// -------------------------------------------------------------------------
// Events

// -------------------------------------------------------------------------
// Properties

/**
 * Whether the radio buttons should be disabled
 *
 * @type {Boolean}
 */
disabled: false,

/**
 * Whether the radio buttons should be put inline together
 *
 * This value is null by default, which means that the sl-radio-group will
 * not override anything. If the `inline` value is false, the children
 * buttons will be forced to not inline, and if true, they will be forced to
 * be inline.
 *
 * @type {?Boolean}
 */
inline: null,

/**
 * The "name" attribute for the children radio buttons
 *
 * Similar to the `inline` property; the default value is null, so the
 * children buttons will not be overridden. Any string value will overwrite
 * the children buttons' name property.
 *
 * @type {?String}
 */
name: null,

/**
 * Whether the radio buttons should be readonly
 *
 * @type {Boolean}
 */
readonly: false,

/**
 * The component's current value property
 *
 * @type {?String}
 */
value: null,

// -------------------------------------------------------------------------
// Observers

/**
 * Initialize the group-wide options and setup child radio buttons
 *
 * @function
 * @throws {ember.assert} Thrown if the `name` property is not set
 * @returns {undefined}
 */
initialize: Ember.on(
    'didInsertElement',
    function() {
        const name = this.get( 'name' );

        const value = this.get( 'value' );
        const isDisabled = this.get( 'disabled' );
        const isInline = this.get( 'inline' );
        const isReadonly = this.get( 'readonly' );

        /**
         * To each sl-radio component apply...
         *
         * - Attributes: name, disabled, readonly
         * - Classes: radio, radio-inline
         */
        this.$( '.sl-radio' ).each( function() {
            const radio = Ember.$( this );
            const input = Ember.$( 'input', this );

            input.attr( 'name', name );

            if ( isDisabled ) {
                input.prop( 'disabled', true );
                radio.addClass( 'disabled' );
            }

            if ( isReadonly ) {
                input.prop( 'readonly', true );
                radio.addClass( 'readonly' );
            }

            if ( true === isInline ) {
                radio.removeClass( 'radio' );
                radio.addClass( 'radio-inline' );
            }

            if ( false === isInline ) {
                radio.removeClass( 'radio-inline' );
                radio.addClass( 'radio' );
            }
        });

        // Pre-select radio button if a value is set
        if ( value ) {
            this.$( `input[name=${name}]:radio[value=${value}]` ).prop(
                'checked', true
            );
        }

        // Apply change() listener to keep group value in sync with select
        // sl-radio option
        const radios = this.$( `input[name=${name}]:radio` );
        radios.change( () => {
            this.set( 'value', radios.filter( ':checked' ).val() );
        });
    }
),

/**
 * Remove events
 *
 * @function
 * @returns {undefined}
 */
unregisterEvents: Ember.on(
    'willClearRender',
    function() {
        this.$( `input[name=${this.get( 'name' )}]:radio` ).off();
    }
)

});




Aucun commentaire:

Enregistrer un commentaire