Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

View helper: classBinding if boolean is false

Tags:

ember.js

How can I bind a class to a view with the #view helper, if a boolean is FALSE?

// this is working
{{#view App.MyView controllerBinding="this" classBinding="controller.content.isActive"}}
    <div>test</div>
{{/view}}

// and this is what i want:
{{#view App.MyView controllerBinding="this" classBinding="!controller.content.isActive:is-not-active"}}
    <div>test</div>
{{/view}}

I want to bind is-not-active as a class name to the view, if controller.content.isActive is false.

I can make an simple inverter function on the view, but I there is a better way.

like image 217
Lux Avatar asked Jul 11 '12 08:07

Lux


1 Answers

UPDATE: The Pull Request has been merged, so you can add a class for a false value like this:

{{#view App.MyView controllerBinding="this"
   classBinding="controller.content.isActive:is-active:is-not-active"}}
{{/view}}

If you don't want to add a class if the value is true, you can use the following syntax:

{{#view App.MyView controllerBinding="this"
   classBinding="controller.content.isActive::is-not-active"}}
{{/view}}

I would create a property on the view (like you already do with your inverter) and bind to this:

Handlebars:

{{#view App.MyView controllerBinding="this" classBinding="isNotActive"}}
    <div>test</div>
{{/view}}

JavaScript:

App.MyView = Ember.View.extend({
    isNotActive: Ember.Binding.not('controller.content.isActive')
});

I've create a Pull Request which has not yet been merged but it addresses this issue and would solve it similar to this:

{{#view App.MyView controllerBinding="this"
   classBinding="controller.content.isActive:is-active:is-not-active"}}
    <div>test</div>
{{/view}}
like image 88
pangratz Avatar answered Oct 18 '22 01:10

pangratz