Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

switch binding case values should accept like-selectors #99

Open
gdibble opened this issue Jan 23, 2015 · 0 comments
Open

switch binding case values should accept like-selectors #99

gdibble opened this issue Jan 23, 2015 · 0 comments

Comments

@gdibble
Copy link

gdibble commented Jan 23, 2015

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants