add possibility to set global directives

dist/transparency.js

@@ -8,7 +8,9 @@ helpers = require('./helpers');
 
 Context = require('./context');
 
-Transparency = {};
+Transparency = {
+  globalDirectives: {}
+};
 
 Transparency.render = function(context, models, directives, options) {
   var base, log;
@@ -33,6 +35,10 @@ Transparency.render = function(context, models, directives, options) {
   return context.render(models, directives, options).el;
 };
 
+Transparency.setGlobalDirectives = function(directives) {
+  return this.globalDirectives = directives;
+};
+
 Transparency.matcher = function(element, key) {
   return element.el.id === key || indexOf.call(element.classNames, key) >= 0 || element.el.name === key || element.el.getAttribute('data-bind') === key;
 };
@@ -672,7 +678,9 @@ module.exports = Instance = (function() {
   });
 
   Instance.prototype.renderDirectives = chainable(function(model, index, directives) {
-    var attributes, element, key, results;
+    var attributes, element, key, results, temp;
+    temp = _.extend({}, this.Transparency.globalDirectives);
+    directives = _.extend(temp, directives);
     results = [];
     for (key in directives) {
       if (!hasProp.call(directives, key)) continue;
@@ -753,6 +761,22 @@ _.toArray = function(obj) {
   return arr;
 };
 
+_.extend = function(destination, source) {
+  if (typeof destination === 'undefined') {
+    destination = {};
+  }
+  for (var property in source) {
+    if (source[property] && source[property].constructor &&
+     source[property].constructor === Object) {
+      destination[property] = destination[property] || {};
+      arguments.callee(destination[property], source[property]);
+    } else {
+      destination[property] = source[property];
+    }
+  }
+  return destination;
+};
+
 _.isString = function(obj) { return _.toString.call(obj) == '[object String]'; };
 
 _.isNumber = function(obj) { return _.toString.call(obj) == '[object Number]'; };

lib/instance.js

@@ -80,7 +80,9 @@ module.exports = Instance = (function() {
   });
 
   Instance.prototype.renderDirectives = chainable(function(model, index, directives) {
-    var attributes, element, key, results;
+    var attributes, element, key, results, temp;
+    temp = _.extend({}, this.Transparency.globalDirectives);
+    directives = _.extend(temp, directives);
     results = [];
     for (key in directives) {
       if (!hasProp.call(directives, key)) continue;

lib/lodash.js

@@ -10,6 +10,22 @@ _.toArray = function(obj) {
   return arr;
 };
 
+_.extend = function(destination, source) {
+  if (typeof destination === 'undefined') {
+    destination = {};
+  }
+  for (var property in source) {
+    if (source[property] && source[property].constructor &&
+     source[property].constructor === Object) {
+      destination[property] = destination[property] || {};
+      arguments.callee(destination[property], source[property]);
+    } else {
+      destination[property] = source[property];
+    }
+  }
+  return destination;
+};
+
 _.isString = function(obj) { return _.toString.call(obj) == '[object String]'; };
 
 _.isNumber = function(obj) { return _.toString.call(obj) == '[object Number]'; };

lib/transparency.js

@@ -7,7 +7,9 @@ helpers = require('./helpers');
 
 Context = require('./context');
 
-Transparency = {};
+Transparency = {
+  globalDirectives: {}
+};
 
 Transparency.render = function(context, models, directives, options) {
   var base, log;
@@ -32,6 +34,10 @@ Transparency.render = function(context, models, directives, options) {
   return context.render(models, directives, options).el;
 };
 
+Transparency.setGlobalDirectives = function(directives) {
+  return this.globalDirectives = directives;
+};
+
 Transparency.matcher = function(element, key) {
   return element.el.id === key || indexOf.call(element.classNames, key) >= 0 || element.el.name === key || element.el.getAttribute('data-bind') === key;
 };

spec/functionalSpecRunner.html

@@ -23,6 +23,7 @@
   <script src="listsSpec.js"></script>
   <script src="modelReferencesSpec.js"></script>
   <script src="nestedModelsSpec.js"></script>
+  <script src="globalDirectives.js"></script>
 
   <script>
     mocha.checkLeaks();

spec/globalDirectives.coffee

@@ -0,0 +1,67 @@
+describe "Transparency", ->
+
+  it "should render plain values with global directives", ->
+
+
+    globalDirective =
+        'global-test':
+            title : (params) ->
+                return this.name
+        'global-backgroundColor':
+            style : (params) ->
+                return 'background-color: ' + this.color
+
+
+    template = $ """
+      <div>
+        <div data-bind="loop">
+            <span data-bind="name" class="global-test"></span>
+            <div data-bind="cars">
+                <span data-bind="color" class="global-backgroundColor"></span>
+            </div>
+            <hr>
+        </div>
+      </div>
+      """
+
+    data =
+      loop: [
+          {
+              "name" : "John"
+              "cars" : [
+                  {"color" : "red"}
+                  {"color" : "blue"}
+              ]
+          }
+          {
+              "name" : "Michael"
+              "cars" : [
+                  {"color" : "yellow"}
+                  {"color" : "green"}
+              ]
+          }
+      ]
+
+    expected = $ """
+      <div>
+        <div data-bind="loop">
+            <span data-bind="name" class="global-test" title="John">John</span>
+            <div data-bind="cars">
+                <span data-bind="color" class="global-backgroundColor" style="background-color: red">red</span>
+                <span data-bind="color" class="global-backgroundColor" style="background-color: blue">blue</span>
+            </div>
+            <hr>
+            <span data-bind="name" class="global-test" title="Michael">Michael</span>
+            <div data-bind="cars">
+                <span data-bind="color" class="global-backgroundColor" style="background-color: yellow">yellow</span>
+                <span data-bind="color" class="global-backgroundColor" style="background-color: green">green</span>
+            </div>
+            <hr>
+        </div>
+      </div>
+      """
+
+    Transparency.setGlobalDirectives globalDirective
+
+    template.render data
+    expect(template).toBeEqual expected

spec/globalDirectives.js

@@ -0,0 +1,48 @@
+(function() {
+  describe("Transparency", function() {
+    return it("should render plain values with global directives", function() {
+      var data, expected, globalDirective, template;
+      globalDirective = {
+        'global-test': {
+          title: function(params) {
+            return this.name;
+          }
+        },
+        'global-backgroundColor': {
+          style: function(params) {
+            return 'background-color: ' + this.color;
+          }
+        }
+      };
+      template = $("<div>\n  <div data-bind=\"loop\">\n      <span data-bind=\"name\" class=\"global-test\"></span>\n      <div data-bind=\"cars\">\n          <span data-bind=\"color\" class=\"global-backgroundColor\"></span>\n      </div>\n      <hr>\n  </div>\n</div>");
+      data = {
+        loop: [
+          {
+            "name": "John",
+            "cars": [
+              {
+                "color": "red"
+              }, {
+                "color": "blue"
+              }
+            ]
+          }, {
+            "name": "Michael",
+            "cars": [
+              {
+                "color": "yellow"
+              }, {
+                "color": "green"
+              }
+            ]
+          }
+        ]
+      };
+      expected = $("<div>\n  <div data-bind=\"loop\">\n      <span data-bind=\"name\" class=\"global-test\" title=\"John\">John</span>\n      <div data-bind=\"cars\">\n          <span data-bind=\"color\" class=\"global-backgroundColor\" style=\"background-color: red\">red</span>\n          <span data-bind=\"color\" class=\"global-backgroundColor\" style=\"background-color: blue\">blue</span>\n      </div>\n      <hr>\n      <span data-bind=\"name\" class=\"global-test\" title=\"Michael\">Michael</span>\n      <div data-bind=\"cars\">\n          <span data-bind=\"color\" class=\"global-backgroundColor\" style=\"background-color: yellow\">yellow</span>\n          <span data-bind=\"color\" class=\"global-backgroundColor\" style=\"background-color: green\">green</span>\n      </div>\n      <hr>\n  </div>\n</div>");
+      Transparency.setGlobalDirectives(globalDirective);
+      template.render(data);
+      return expect(template).toBeEqual(expected);
+    });
+  });
+
+}).call(this);

src/instance.coffee

@@ -138,6 +138,9 @@ module.exports = class Instance
   #
   # Directives are executed after the default rendering, so that they can be used for overriding default rendering.
   renderDirectives: chainable (model, index, directives) ->
+    temp = _.extend({}, @Transparency.globalDirectives)
+    directives = _.extend(temp, directives)
+
     for own key, attributes of directives when typeof attributes == 'object'
       model = {value: model} unless typeof model == 'object'
 
@@ -153,4 +156,3 @@ module.exports = class Instance
     elements = @queryCache[key] ||= (el for el in @elements when @Transparency.matcher el, key)
     helpers.log "Matching elements for '#{key}':", elements
     elements
-

src/transparency.coffee

@@ -31,7 +31,9 @@ Context = require './context'
 # For the full API reference, please see the README.
 
 # ## Public API
-Transparency = {}
+Transparency = {
+    globalDirectives : {}
+}
 
 # `Transparency.render` maps JSON objects to DOM elements.
 Transparency.render = (context, models = [], directives = {}, options = {}) ->
@@ -50,6 +52,9 @@ Transparency.render = (context, models = [], directives = {}, options = {}) ->
   # reflow calculations are not triggered. So, detach it before rendering.
   context.render(models, directives, options).el
 
+Transparency.setGlobalDirectives = (directives) ->
+    @globalDirectives = directives
+
 # ### Configuration
 
 # By default, Transparency matches model properties to elements by `id`, `class`, `name` and `data-bind` attributes.