The tokenList filter operates on an object and uses the keys in the o…

…bject to build a space separated string, including the key if the value is truthy. For example: {x: 1, y: 0, z: 1} | tokenList gets transformed into: "x z" [email protected] Review URL: https://codereview.appspot.com/12851044
googlearchive · Oct 15, 2013 · be2b4e2 · be2b4e2
1 parent 1466486
commit be2b4e2
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/src/polymer-expressions.js b/src/polymer-expressions.js
@@ -384,6 +384,19 @@
 
   PolymerExpressions.filters = Object.create(null);
 
+  PolymerExpressions.filters.tokenList = function() {
+    return {
+      toDOM: function(value) {
+        var tokens = [];
+        for (var key in value) {
+          if (value[key])
+            tokens.push(key);
+        }
+        return tokens.join(' ');
+      }
+    };
+  };
+
   PolymerExpressions.prototype = {
     prepareBinding: function(pathString, name, node) {
       if (Path.get(pathString).valid)

diff --git a/tests/tests.js b/tests/tests.js
@@ -127,7 +127,7 @@ suite('PolymerExpressions', function() {
 
   test('ClassName Singular', function() {
     var div = createTestHtml(
-        '<template bind><div class="{{ foo: bar }}">' +
+        '<template bind><div class="{{ {foo: bar} | tokenList }}">' +
         '</div></template>');
     var model = {bar: 1};
     recursivelySetTemplateModel(div, model);
@@ -144,7 +144,8 @@ suite('PolymerExpressions', function() {
   test('ClassName Multiple', function() {
     var div = createTestHtml(
         '<template bind>' +
-        '<div class="{{ foo: bar; baz: bat > 1; boo: bot.bam }}">' +
+        '<div class="{{ {foo: bar, baz: bat > 1, boo: bot.bam} ' +
+            '| tokenList }}">' +
         '</div></template>');
     var model = {bar: 1, bat: 1, bot: { bam: 1 }};
     recursivelySetTemplateModel(div, model);
@@ -165,6 +166,27 @@ suite('PolymerExpressions', function() {
     assertHasClass(target, 'boo');
   });
 
+  test('tokenList', function() {
+    var div = createTestHtml(
+        '<template bind>' +
+        '<div class="{{ object | tokenList }}">' +
+        '</div></template>');
+
+    var model = {
+      object: {bar: 1, bat: 1, bot: {bam: 1}}
+    };
+    recursivelySetTemplateModel(div, model);
+    Platform.performMicrotaskCheckpoint();
+
+    var target = div.childNodes[1];
+    assert.strictEqual('bar bat bot', target.className);
+
+    model.object = {bar: 1, bot: 1};
+    Platform.performMicrotaskCheckpoint();
+
+    assert.strictEqual('bar bot', target.className);
+  });
+
   test('Named Scope Bind', function() {
     var div = createTestHtml(
         '<template bind>' +