Skip to content

switch binding case values should accept like-selectors #99

@gdibble

Description

@gdibble

desired - but not possible due to switch value/selector bug described below.

bindings: {
    'model.mediaStatus': {
        type:  'switch',
        cases: {
            'uploading':  '.progress',
            'processing': '.progress',
            'encoding':   '.progress',
            'failed':     '.failed',
/*jshint -W044*/  //ignore warning: Bad or unnecessary escaping.
            'not\ sent':  '.actions',
/*jshint +W044*/
            'finished':   '.actions'
        }
    }
}

jade:

.progress
    .progress-bar.progress-bar-striped.active(role='progressbar', aria-valuenow='100', aria-valuemin='100', aria-valuemax='100', style='width: 100%')
        span(data-hook='mediaStatus')

^when the value of model.mediaStatus is uploading, processing or encoding, i want to show the progress bar, and similarly with the .actions DIV.

however changes to model.mediaStatus will not keep .progress visible. thus you cannot use the same selector for multiple values.


i had to create three separate progress DIVs classed .uploading, .processing and .encoding to get this switch binding to work as expected.

compromise - to make the switch-binding work:

bindings: {
    'model.mediaStatus': {
        type:  'switch',
        cases: {
            'uploading':  '.uploading',
            'processing': '.processing',
            'encoding':   '.encoding',
            'failed':     '.failed',
/*jshint -W044*/  //ignore warning: Bad or unnecessary escaping.
            'not\ sent':  '.actions',
/*jshint +W044*/
            'finished':   '.actions'
        }
    }
}

jade:

.progress.uploading
    .progress-bar.progress-bar-success.progress-bar-striped.active(role='progressbar', aria-valuenow='100', aria-valuemin='100', aria-valuemax='100')
        span uploading
.progress.processing
    .progress-bar.progress-bar-striped.active(role='progressbar', aria-valuenow='100', aria-valuemin='100', aria-valuemax='100')
        span processing
.progress.encoding
    .progress-bar.progress-bar-warning.progress-bar-striped.active(role='progressbar', aria-valuenow='100', aria-valuemin='100', aria-valuemax='100')
        span encoding

i would have rather had one .progress element and [also] bound the value of model.mediaStatus to a child SPAN element. however i was forced to create three separate progress bars w/o the value-binding.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions