Support :: syntax in classNameBindings of Ember.View #732

pangratz · 2012-04-24T15:23:24Z

This commit extends bindings to class names by adding support for falsy class names by using the double colon* syntax as following:

Ember.View.create({
  classNameBindings: ['isEnabled:enabled:disabled']
  isEnabled: true
});

This will add the class 'enabled' when isEnabled is true. If isEnabled is false the class 'disabled' is added instead.

*Inspired by recent semicolon discussion

travisbot · 2012-04-24T15:25:04Z

This pull request fails (merged b4c784b4 into 3c02542).

dgeb · 2012-04-24T15:35:54Z

Seems like a useful concept. What do you think of the syntax isEnabled?enabled:disabled to show that it's acting as a ternary statement? I suppose isEnabled?enabled would also need to be supported for consistency.

pangratz · 2012-04-24T15:40:20Z

@dgeb Good point! I like your syntax better.

wagenet · 2012-04-24T15:46:50Z

@pangratz This also needs to be added to the Handlebars helpers as well. However, we should make sure this is something we do want to add before you go to the trouble to add it there also.

pangratz · 2012-04-24T15:57:21Z

@wagenet thanks for the hint.

pangratz · 2012-04-24T16:02:00Z

Just a note: there should be a single method which returns the class name for a property and this should be used in both places to DRY: binding.js and view.js

wagenet · 2012-04-24T16:11:05Z

@pangratz Would you like to DRY this up?

pangratz · 2012-04-24T16:25:53Z

I'll give it a DRY. Uhh, Oscar for bad pun, here I come..

devinus · 2012-04-26T18:14:18Z

isFoo?foo:bar also has the unique advantage of being the JS ternary operator.

devinus · 2012-04-26T18:14:30Z

Clever.

knassar · 2012-04-26T20:59:31Z

I think the more flexible solution would be to allow attr/class bindings to a non-boolean computed property, with the return value of the property being used as the attribute value. Something like:

Ember.View.create({
  classNameBindings: ['elementClasses::'],
  isEnabled: true,
  elementClasses: Ember.computed(function() {
    if (this.get('isEnabled') === true) {
       return "enabled";
    } else if (this.get('isEnabled') === false) {
       return "disabled";
    } else {
       return "";
    }
  }).property('isEnabled')
});

dgeb · 2012-04-26T21:34:20Z

@knassar - Class names can currently be bound to computed properties. Here's an example I modified: http://jsfiddle.net/dgeb/hscQV/

I think the advantage of @pangratz's ternary solution is its brevity. Plus, it can be used from either the view class or the handlebars template (although #593 still needs to be sorted out).

knassar · 2012-04-26T22:15:57Z

Huh. I could have sworn I tried that and it didn't work. Thanks @dgeb

Well, in that case, I like the ternary operator version: property?trueClass:falseClass

travisbot · 2012-05-14T17:39:45Z

This pull request passes (merged 994dd8be into 4ef1568).

travisbot · 2012-05-14T17:42:57Z

This pull request passes (merged 9c600f24 into 4ef1568).

pangratz · 2012-05-14T18:09:45Z

I rebased onto master and squashed the commits.

travisbot · 2012-05-14T18:12:10Z

This pull request passes (merged c9cf4ab into 4ef1568).

dgeb · 2012-05-17T21:53:30Z

Since this has a large amount of overlap with code I'm working on to finally wrap up #593, it would be nice to get this accepted sooner than later (of course, assuming it's acceptable :). Otherwise, either @pangratz or myself will end up doing a bunch of refactoring afterward.

ebryn · 2012-06-02T20:37:37Z

I like this, but I think we should colons.

pangratz · 2012-07-14T01:28:28Z

I've rebased on to the latest master. The current implementation uses the ternary opertator syntax path?true-class:false-class. But changing it to double-colon syntax should be an easy change. So what do you think? Any comments on the implementation?

pangratz · 2012-07-14T02:02:02Z

It looks like I wasn't rebasing on to the latest master 😔

I'm on it ...

dgeb · 2012-07-14T02:16:29Z

@pangratz please take a look at how class bindings are now evaluated in the {{view}} helper. This will require some changes, regardless of which format (:: vs ?:) is chosen. I still like the ternary format, but I may be in the minority here.

pangratz · 2012-07-14T02:33:52Z

thanks @dgeb for the hint

ebryn · 2012-07-14T02:43:07Z

If you make it use colon syntax, I will merge immediately :)

The helper methods are - _parsePropertyPath - _classStringForValue - _classStringForPath

travisbot · 2012-07-14T18:37:24Z

This pull request passes (merged b7aa61c into 3d8a3b3).

The syntax to define class names for truthy and falsy values changed from isEnabled?enabled:disabled to isEnabled:enabled:disabled

travisbot · 2012-07-14T20:19:03Z

This pull request passes (merged 89d6319 into 3d8a3b3).

travisbot · 2012-07-14T20:46:56Z

This pull request passes (merged b0d4845 into 3d8a3b3).

travisbot · 2012-07-14T20:47:02Z

This pull request passes (merged 0e41ab5b into 3d8a3b3).

travisbot · 2012-07-14T21:06:33Z

This pull request passes (merged 96840c6 into 3d8a3b3).

travisbot · 2012-07-15T05:35:09Z

This pull request passes (merged 0d384ae into 3d8a3b3).

pangratz · 2012-07-17T21:56:51Z

Can I get some feedback on this?

dgeb · 2012-07-18T10:28:24Z

Seems good to me, @pangratz. I appreciate the refactoring you've done to consolidate property parsing and class name evaluation.

pangratz · 2012-07-18T17:37:38Z

Thanks @dgeb !

I was thinking about another thing: sometimes people ask for a binding where a class is bound if the value of the property is false. Previously you had to create a computed property or a Ember.Binding.not() for that:

Ember.View.extend({
   isNotEnabledBinding: Ember.Binding.not('isEnabled'),
   classNameBindings: ['isNotEnabled:not-enabled']
});

When this gets merged, it would be possible via:

Ember.View.extend({
   classNameBindings: ['isEnabled::not-enabled']
});

Is this something which should be supported or should I add an Ember.assert for the "true class" to not being empty?

dgeb · 2012-07-18T18:17:20Z

@pangratz I discussed this very question with @ebryn a few days ago and we agreed it's convenient to allow the true class to be empty so that isEnabled::not-enabled works (although I find the syntax a bit weird, especially coming from Ruby). So I'm glad this works - thanks for checking!

@ebryn Any more concerns or are you ready to merge?

ebryn · 2012-07-18T18:17:58Z

@pangratz My intent was that isEnabled::not-enabled would work.

devinus · 2012-07-18T18:30:03Z

Double colon is confusing, but I don't have a better suggestion.

pangratz · 2012-07-18T19:08:21Z

Thanks for the feedback!

I'll add a test case covering the empty true class ...

So if a binding like Ember.View.extend({ classNameBindings: ['isEnabled::disabled'] }); adds no class if `isEnabled` is `true` and adds the class disabled when `isEnabled` is `false`

pangratz · 2012-07-18T20:46:50Z

@ebryn I've added a test case for the empty true class case.

I'll do a rebase on master if this is good to go ...

travisbot · 2012-07-18T20:48:06Z

This pull request passes (merged ae0dd6a into 3d8a3b3).

travisbot · 2012-07-18T20:55:36Z

This pull request passes (merged 7df746d into 3d8a3b3).

Support :: syntax in classNameBindings of Ember.View

ebryn · 2012-07-18T22:10:05Z

Thanks @pangratz for adding this.

pangratz · 2012-07-18T22:27:04Z

Wuhuuu, nice! 🤘

Thanks for your feedback!

sly7-7 · 2012-07-18T22:33:47Z

Very nice, thx all of you for this feature.

albertjan · 2012-08-09T08:50:13Z

Awesome! thanks!

sherwinyu · 2012-12-19T05:11:12Z

I'm just curious, what was the reason for preferring the double colon syntax over the ternary test?trueClass:falseClass syntax?

pangratz added 4 commits July 14, 2012 20:27

Add tests for ternary operator in class bindings

a75451c

Implement helper methods in Ember.View

411321a

The helper methods are - _parsePropertyPath - _classStringForValue - _classStringForPath

Add tests for Ember.View helpers

e596ab0

Use previously introduced Ember.View helpers in Handlebar helpers

b7aa61c

Change ternary syntax to double colon sytax

6309f24

The syntax to define class names for truthy and falsy values changed from isEnabled?enabled:disabled to isEnabled:enabled:disabled

Add some documentation to Ember.View helpers

b0d4845

Add more documentation

96840c6

Fix typo

0d384ae

pangratz mentioned this pull request Jul 15, 2012

Add documentation for double colon syntax in class name bindings emberjs/website#105

Merged

pangratz added 2 commits July 18, 2012 22:35

Add case where trueClass in classNameBindings is empty

077e59c

So if a binding like Ember.View.extend({ classNameBindings: ['isEnabled::disabled'] }); adds no class if `isEnabled` is `true` and adds the class disabled when `isEnabled` is `false`

Refactor Ember.View#_classStringForValue

ae0dd6a

Add documentation for the case where the "true class" is empty

7df746d

ebryn added a commit that referenced this pull request Jul 18, 2012

Merge pull request #732 from pangratz/add_double_colon_syntax

0a4ece1

Support :: syntax in classNameBindings of Ember.View

ebryn merged commit 0a4ece1 into emberjs:master Jul 18, 2012

pangratz deleted the add_double_colon_syntax branch November 14, 2013 19:19

Support :: syntax in classNameBindings of Ember.View #732

Support :: syntax in classNameBindings of Ember.View #732

Conversation

pangratz commented Apr 24, 2012

travisbot commented Apr 24, 2012

dgeb commented Apr 24, 2012

pangratz commented Apr 24, 2012

wagenet commented Apr 24, 2012

pangratz commented Apr 24, 2012

pangratz commented Apr 24, 2012

wagenet commented Apr 24, 2012

pangratz commented Apr 24, 2012

devinus commented Apr 26, 2012

devinus commented Apr 26, 2012

knassar commented Apr 26, 2012

dgeb commented Apr 26, 2012

knassar commented Apr 26, 2012

travisbot commented May 14, 2012

travisbot commented May 14, 2012

pangratz commented May 14, 2012

travisbot commented May 14, 2012

dgeb commented May 17, 2012

ebryn commented Jun 2, 2012

pangratz commented Jul 14, 2012

pangratz commented Jul 14, 2012

dgeb commented Jul 14, 2012

pangratz commented Jul 14, 2012

ebryn commented Jul 14, 2012

travisbot commented Jul 14, 2012

travisbot commented Jul 14, 2012

travisbot commented Jul 14, 2012

travisbot commented Jul 14, 2012

travisbot commented Jul 14, 2012

travisbot commented Jul 15, 2012

pangratz commented Jul 17, 2012

dgeb commented Jul 18, 2012

pangratz commented Jul 18, 2012

dgeb commented Jul 18, 2012

ebryn commented Jul 18, 2012

devinus commented Jul 18, 2012

pangratz commented Jul 18, 2012

pangratz commented Jul 18, 2012

travisbot commented Jul 18, 2012

travisbot commented Jul 18, 2012

ebryn commented Jul 18, 2012

pangratz commented Jul 18, 2012

sly7-7 commented Jul 18, 2012

albertjan commented Aug 9, 2012

sherwinyu commented Dec 19, 2012