Allow multiple signal names

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "aurelia-templating-resources",
-  "version": "1.0.0-beta.1.0.4",
+  "version": "1.0.0-beta.1.1.0",
   "description": "A standard set of behaviors, converters and other resources for use with the Aurelia templating library.",
   "keywords": [
     "aurelia",
@@ -17,14 +17,14 @@
     "url": "http://github.com/aurelia/templating-resources"
   },
   "dependencies": {
-    "aurelia-binding": "^1.0.0-beta.1.0.3",
-    "aurelia-dependency-injection": "^1.0.0-beta.1",
-    "aurelia-loader": "^1.0.0-beta.1",
-    "aurelia-logging": "^1.0.0-beta.1",
-    "aurelia-pal": "^1.0.0-beta.1.0.1",
-    "aurelia-path": "^1.0.0-beta.1",
-    "aurelia-task-queue": "^1.0.0-beta.1",
-    "aurelia-templating": "^1.0.0-beta.1",
+    "aurelia-binding": "^1.0.0-beta.1.1.0",
+    "aurelia-dependency-injection": "^1.0.0-beta.1.1.2",
+    "aurelia-loader": "^1.0.0-beta.1.1.0",
+    "aurelia-logging": "^1.0.0-beta.1.1.1",
+    "aurelia-pal": "^1.0.0-beta.1.1.1",
+    "aurelia-path": "^1.0.0-beta.1.1.0",
+    "aurelia-task-queue": "^1.0.0-beta.1.1.0",
+    "aurelia-templating": "^1.0.0-beta.1.1.0",
     "core-js": "zloirock/core-js"
   }
 }

config.js

@@ -15,20 +15,20 @@ System.config({
   },
 
   map: {
-    "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.0.5",
-    "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.0.1",
-    "aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.0.1",
-    "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
-    "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
-    "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.0.2",
-    "aurelia-pal-browser": "npm:aurelia-pal-browser@1.0.0-beta.1.0.3",
-    "aurelia-path": "npm:aurelia-path@1.0.0-beta.1",
-    "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.0.1",
-    "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.0.3",
-    "aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.1.0.2",
-    "babel": "npm:babel-core@5.8.34",
-    "babel-runtime": "npm:babel-runtime@5.8.34",
-    "core-js": "npm:core-js@1.2.6",
+    "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.1.0",
+    "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.1.2",
+    "aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.1.0",
+    "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.1",
+    "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.3",
+    "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
+    "aurelia-pal-browser": "npm:aurelia-pal-browser@1.0.0-beta.1.1.2",
+    "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.1.0",
+    "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.1.0",
+    "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.1.0",
+    "aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.1.1.0",
+    "babel": "npm:babel-core@5.8.35",
+    "babel-runtime": "npm:babel-runtime@5.8.35",
+    "core-js": "npm:core-js@2.0.3",
     "github:jspm/nodelibs-assert@0.1.0": {
       "assert": "npm:assert@1.3.0"
     },
@@ -44,53 +44,53 @@ System.config({
     "npm:assert@1.3.0": {
       "util": "npm:util@0.10.3"
     },
-    "npm:aurelia-binding@1.0.0-beta.1.0.5": {
-      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.0.2",
-      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.0.1",
-      "core-js": "npm:core-js@1.2.6"
-    },
-    "npm:aurelia-dependency-injection@1.0.0-beta.1.0.1": {
-      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
-      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.0.2",
-      "core-js": "npm:core-js@1.2.6"
-    },
-    "npm:aurelia-loader@1.0.0-beta.1.0.1": {
-      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
-      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1"
-    },
-    "npm:aurelia-metadata@1.0.0-beta.1": {
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.0.2",
-      "core-js": "npm:core-js@1.2.6"
-    },
-    "npm:aurelia-pal-browser@1.0.0-beta.1.0.3": {
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.0.2",
-      "core-js": "npm:core-js@1.2.6"
-    },
-    "npm:aurelia-task-queue@1.0.0-beta.1.0.1": {
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.0.2"
-    },
-    "npm:aurelia-templating-binding@1.0.0-beta.1.0.2": {
-      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.0.5",
-      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
-      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.0.3"
-    },
-    "npm:aurelia-templating@1.0.0-beta.1.0.3": {
-      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.0.5",
-      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.0.1",
-      "aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.0.1",
-      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1",
-      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1",
-      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.0.2",
-      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1",
-      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.0.1",
-      "core-js": "npm:core-js@1.2.6"
-    },
-    "npm:babel-runtime@5.8.34": {
+    "npm:aurelia-binding@1.0.0-beta.1.1.0": {
+      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.3",
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
+      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.1.0",
+      "core-js": "npm:core-js@2.0.3"
+    },
+    "npm:aurelia-dependency-injection@1.0.0-beta.1.1.2": {
+      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.1",
+      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.3",
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
+      "core-js": "npm:core-js@2.0.3"
+    },
+    "npm:aurelia-loader@1.0.0-beta.1.1.0": {
+      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.3",
+      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.1.0"
+    },
+    "npm:aurelia-metadata@1.0.0-beta.1.1.3": {
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
+      "core-js": "npm:core-js@2.0.3"
+    },
+    "npm:aurelia-pal-browser@1.0.0-beta.1.1.2": {
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
+      "core-js": "npm:core-js@2.0.3"
+    },
+    "npm:aurelia-task-queue@1.0.0-beta.1.1.0": {
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1"
+    },
+    "npm:aurelia-templating-binding@1.0.0-beta.1.1.0": {
+      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.1.0",
+      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.1",
+      "aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.1.0"
+    },
+    "npm:aurelia-templating@1.0.0-beta.1.1.0": {
+      "aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.1.0",
+      "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.1.2",
+      "aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.1.0",
+      "aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.1.1",
+      "aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.1.3",
+      "aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.1.1",
+      "aurelia-path": "npm:aurelia-path@1.0.0-beta.1.1.0",
+      "aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.1.0",
+      "core-js": "npm:core-js@2.0.3"
+    },
+    "npm:babel-runtime@5.8.35": {
       "process": "github:jspm/nodelibs-process@0.1.2"
     },
-    "npm:core-js@1.2.6": {
+    "npm:core-js@2.0.3": {
       "fs": "github:jspm/nodelibs-fs@0.1.2",
       "path": "github:jspm/nodelibs-path@0.1.0",
       "process": "github:jspm/nodelibs-process@0.1.2",

dist/amd/aurelia-templating-resources.d.ts

@@ -243,6 +243,31 @@ declare module 'aurelia-templating-resources' {
     sanitize(input: any): any;
   }
 
+  /**
+  * Binding to conditionally show markup in the DOM based on the value.
+  * - different from "if" in that the markup is still added to the DOM, simply not shown.
+  */
+  export class Hide {
+
+    /**
+      * Creates a new instance of Hide.
+      * @param element Target element to conditionally hide.
+      * @param animator The animator that conditionally adds or removes the aurelia-hide css class.
+      */
+    constructor(element: any, animator: any);
+
+    /**
+      * Invoked everytime the bound value changes.
+      * @param newValue The new value.
+      */
+    valueChanged(newValue: any): any;
+
+    /**
+      * Binds the Hide attribute.
+      */
+    bind(bindingContext: any): any;
+  }
+
   /**
   * CustomAttribute that binds provided DOM element's focus attribute with a property on the viewmodel.
   */

dist/amd/hide.js

@@ -0,0 +1,35 @@
+define(['exports', 'aurelia-dependency-injection', 'aurelia-templating', 'aurelia-pal'], function (exports, _aureliaDependencyInjection, _aureliaTemplating, _aureliaPal) {
+  'use strict';
+
+  exports.__esModule = true;
+
+  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+  var Hide = (function () {
+    function Hide(element, animator) {
+      _classCallCheck(this, _Hide);
+
+      this.element = element;
+      this.animator = animator;
+    }
+
+    Hide.prototype.valueChanged = function valueChanged(newValue) {
+      if (newValue) {
+        this.animator.addClass(this.element, 'aurelia-hide');
+      } else {
+        this.animator.removeClass(this.element, 'aurelia-hide');
+      }
+    };
+
+    Hide.prototype.bind = function bind(bindingContext) {
+      this.valueChanged(this.value);
+    };
+
+    var _Hide = Hide;
+    Hide = _aureliaDependencyInjection.inject(_aureliaPal.DOM.Element, _aureliaTemplating.Animator)(Hide) || Hide;
+    Hide = _aureliaTemplating.customAttribute('hide')(Hide) || Hide;
+    return Hide;
+  })();
+
+  exports.Hide = Hide;
+});

dist/aurelia-templating-resources.d.ts

@@ -243,6 +243,31 @@ declare module 'aurelia-templating-resources' {
     sanitize(input: any): any;
   }
 
+  /**
+  * Binding to conditionally show markup in the DOM based on the value.
+  * - different from "if" in that the markup is still added to the DOM, simply not shown.
+  */
+  export class Hide {
+
+    /**
+      * Creates a new instance of Hide.
+      * @param element Target element to conditionally hide.
+      * @param animator The animator that conditionally adds or removes the aurelia-hide css class.
+      */
+    constructor(element: any, animator: any);
+
+    /**
+      * Invoked everytime the bound value changes.
+      * @param newValue The new value.
+      */
+    valueChanged(newValue: any): any;
+
+    /**
+      * Binds the Hide attribute.
+      */
+    bind(bindingContext: any): any;
+  }
+
   /**
   * CustomAttribute that binds provided DOM element's focus attribute with a property on the viewmodel.
   */

dist/aurelia-templating-resources.js

@@ -273,7 +273,7 @@ export class Replaceable {
   * @param viewSlot viewSlot The slot the view is injected in to.
   */
   constructor(viewFactory, viewSlot) {
-    this.viewFactory = viewFactory;
+    this.viewFactory = viewFactory; //This is referenced internally in the Controller's bind method.
     this.viewSlot = viewSlot;
     this.view = null;
   }
@@ -527,6 +527,43 @@ export class HTMLSanitizer {
   }
 }
 
+/**
+* Binding to conditionally show markup in the DOM based on the value.
+* - different from "if" in that the markup is still added to the DOM, simply not shown.
+*/
+@customAttribute('hide')
+@inject(DOM.Element, Animator)
+export class Hide {
+  /**
+  * Creates a new instance of Hide.
+  * @param element Target element to conditionally hide.
+  * @param animator The animator that conditionally adds or removes the aurelia-hide css class.
+  */
+  constructor(element, animator) {
+    this.element = element;
+    this.animator = animator;
+  }
+
+  /**
+  * Invoked everytime the bound value changes.
+  * @param newValue The new value.
+  */
+  valueChanged(newValue) {
+    if (newValue) {
+      this.animator.addClass(this.element, 'aurelia-hide');
+    } else {
+      this.animator.removeClass(this.element, 'aurelia-hide');
+    }
+  }
+
+  /**
+  * Binds the Hide attribute.
+  */
+  bind(bindingContext) {
+    this.valueChanged(this.value);
+  }
+}
+
 /**
 * CustomAttribute that binds provided DOM element's focus attribute with a property on the viewmodel.
 */

dist/commonjs/aurelia-templating-resources.d.ts

@@ -243,6 +243,31 @@ declare module 'aurelia-templating-resources' {
     sanitize(input: any): any;
   }
 
+  /**
+  * Binding to conditionally show markup in the DOM based on the value.
+  * - different from "if" in that the markup is still added to the DOM, simply not shown.
+  */
+  export class Hide {
+
+    /**
+      * Creates a new instance of Hide.
+      * @param element Target element to conditionally hide.
+      * @param animator The animator that conditionally adds or removes the aurelia-hide css class.
+      */
+    constructor(element: any, animator: any);
+
+    /**
+      * Invoked everytime the bound value changes.
+      * @param newValue The new value.
+      */
+    valueChanged(newValue: any): any;
+
+    /**
+      * Binds the Hide attribute.
+      */
+    bind(bindingContext: any): any;
+  }
+
   /**
   * CustomAttribute that binds provided DOM element's focus attribute with a property on the viewmodel.
   */

dist/commonjs/hide.js

@@ -0,0 +1,39 @@
+'use strict';
+
+exports.__esModule = true;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+var _aureliaDependencyInjection = require('aurelia-dependency-injection');
+
+var _aureliaTemplating = require('aurelia-templating');
+
+var _aureliaPal = require('aurelia-pal');
+
+var Hide = (function () {
+  function Hide(element, animator) {
+    _classCallCheck(this, _Hide);
+
+    this.element = element;
+    this.animator = animator;
+  }
+
+  Hide.prototype.valueChanged = function valueChanged(newValue) {
+    if (newValue) {
+      this.animator.addClass(this.element, 'aurelia-hide');
+    } else {
+      this.animator.removeClass(this.element, 'aurelia-hide');
+    }
+  };
+
+  Hide.prototype.bind = function bind(bindingContext) {
+    this.valueChanged(this.value);
+  };
+
+  var _Hide = Hide;
+  Hide = _aureliaDependencyInjection.inject(_aureliaPal.DOM.Element, _aureliaTemplating.Animator)(Hide) || Hide;
+  Hide = _aureliaTemplating.customAttribute('hide')(Hide) || Hide;
+  return Hide;
+})();
+
+exports.Hide = Hide;