saasufy-components 2.15.2 → 3.0.0

package/README.md

@@ -348,14 +348,12 @@ Used for displaying and editing a single field of a model instance in real time.
 - `model-id` (required): The id of the model instance/record to bind to.
 - `model-field` (required): The field of the model instance/record to bind to for reading and updating.
 - `debounce-delay`: The delay in milliseconds to wait before sending an update to the server. This is useful to batch multiple updates together (as is common when user is typing). Default is 300ms.
-- `enable-rebound`: By default, real-time updates performed via `model-input` components are not sent back to the publishing client as it is assumed that state changes are either localized to a single `model-input` component or shared with other components on the same page via the use of `consumers`, `bind-to-collection` or `bind-to-model` attributes. There may be situations where you have a specific value displayed in multiple places on the same page/screen and want them to be updated in real-time to reflect the latest value of the model field. For convenience, you can add the `enable-rebound` attribute to the `model-input` component to force real-time updates to rebound back to the publisher and this will ensure that all components on the page will receive real-time updates (will sync with each other) without having to explicitly bind them together via the front end. Note that enabling rebound comes with additional performance overheads.
 - `input-id`: Can be used to set an `id` attribute on the inner `input` element.
 - `list`: If specified, this sets the list attribute of the inner `input` element to provide input suggestions (only works with standard input elements).
-- `bind-to-model`: If this attribute exists, the `model-input` component will attempt to host its model data within the nearest compatible `model-viewer` parent component instead of creating its own model internally. This can improve efficiency/reuse of model data and provide a better user experience. For example, if the `model-input` element is re-rendered, it will not have to re-fetch its data as it will be kept inside its parent `model-viewer` component.
-- `bind-to-collection`: If this attribute exists, the `model-input` component will attempt to host its model data within the nearest compatible `collection-browser` or `collection-reducer` parent component instead of creating its own model internally. This can improve efficiency/reuse of model data and provide a better user experience. For example, if the `model-input` element is re-rendered, it will not have to re-fetch its data as it will be kept inside its parent `collection-browser` or `collection-reducer` component. Note that the parent component will take over the responsibility for cleaning up the model; this includes scenarios where the user loads a different page of the collection/view where the specified model instance is no longer present.
 - `type`: The type of the input component; can be `text`, `number`, `select`, `textarea` or `checkbox`.
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
 - `consumers`: This allows you to connect this `model-input` to other elements on your page which share the same parent element. It takes a list of selectors with optional attributes to target. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the value of the `model-input` component in real-time. You can specify multiple selectors separated by commas such as `.my-input,my-div` - In this case, because attribute names are not specified, values will be injected into the `value` attribute (for input elements) or into the `innerHTML` property (for other kinds of elements). The default attribute/property depends on the element type.
+- `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers.
 - `show-error-message`: If this attribute is present, an error message will be displayed above the input if it fails to update the value.
 - `options`: A comma-separated list of options to provide - This only works if the input type is `select`.
 - `height`: Allows you to set the height of the inner `input` element programmatically.
@@ -364,6 +362,7 @@ Used for displaying and editing a single field of a model instance in real time.
 - `hide-error-logs`: By default, this component will log errors to the console. If set, this attribute will suppress such errors from showing up on the console.
 - `autocapitalize`: Can be `on` or `off` - It will set the auto-capitalize attribute on the inner input element. This is useful for mobile devices to enable or disable auto-capitalization of the first character which is typed into the input element.
 - `autocorrect`: Can be `on` or `off` - It will set the auto-correct attribute on the inner input element. This is useful for mobile devices to enable or disable auto-correct.
+- `enable-rebound`: By default, for efficiency reasons, real-time updates performed via `model-input` components are not sent back to the publishing client; it is usually unnecessary because state changes are shared locally between all components which are bound to the same `socket-provider`. You can add the `enable-rebound` attribute to the `model-input` component to force real-time updates to rebound back to the publisher to support more advanced scenarios. Note that enabling rebound comes with additional performance overheads.
 
 ### model-text
 
@@ -385,8 +384,6 @@ Used to displaying a field of a model instance in real time.
 - `model-type` (required): Specifies the type of model to bind to. This should match a `Model` available in your Saasufy service.
 - `model-id` (required): The id of the model instance/record to bind to.
 - `model-field` (required): The field of the model instance/record to bind to for reading.
-- `bind-to-model`: If this attribute exists, the `model-text` component will attempt to fetch its model data from the nearest compatible `model-viewer` parent component instead of creating its own model internally. This can improve efficiency/reuse of model data and provide a better user experience. For example, if the `model-text` element is re-rendered, it will not have to re-fetch its data as it will be kept inside its parent `model-viewer` component.
-- `bind-to-collection`: If this attribute exists, the `model-text` component will attempt to fetch its model data from the nearest compatible `collection-browser` or `collection-reducer` parent component instead of creating its own model internally. This can improve efficiency/reuse of model data and provide a better user experience. For example, if the `model-text` element is re-rendered, it will not have to re-fetch its data as it will be kept inside its parent `collection-browser` or `collection-reducer` component. Note that the parent component will take over the responsibility for cleaning up the model; this includes scenarios where the user loads a different page of the collection/view where the specified model instance is no longer present.
 - `hide-error-logs`: By default, this component will log errors to the console. If set, this attribute will suppress such errors from showing up on the console.
 
 ### model-viewer
@@ -426,7 +423,6 @@ Used for rendering a single model resource using a template. This is the single-
 An input component which can pass data to other components (or HTML elements) via custom attributes.
 A common use case for it is to pass user input to `collection-browser` or `model-viewer` components to then fetch data from Saasufy.
 This component can be configured to provide its data to multiple components (consumers) via custom attributes.
-Note that an `input-provider` only targets elements which are downstream from its parent element in the HTML hierarchy.
 
 **Example usage**
 
@@ -446,6 +442,7 @@ Note that an `input-provider` only targets elements which are downstream from it
 - `type`: The type of the input component; can be `text`, `number`, `select`, `textarea` or `checkbox`.
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
 - `consumers`: This allows you to connect this `input-provider` to other elements on your page which share the same parent element. It takes a list of selectors with optional attributes to target. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the value of the `input-provider` component in real-time. You can specify multiple selectors separated by commas such as `.my-input,my-div` - In this case, because attribute names are not specified, values will be injected into the `value` attribute (for input elements) or into the `innerHTML` property (for other kinds of elements). The default attribute/property depends on the element type.
+- `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers.
 - `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together (as is common when user is typing). Default is 800ms.
 - `options`: A comma-separated list of options to provide - This only works if the input type is `select`.
 - `height`: Allows you to set the height of the inner `input` element programmatically.

package/input-provider.js

@@ -135,20 +135,21 @@ class InputProvider extends HTMLElement {
 
     let onInputChange = (event) => {
       debounce(async () => {
+        let providerTemplate = this.getAttribute('provider-template');
         if (event.target.value === this.lastValue) return;
         if (inputElement.type === 'checkbox') {
           let checked = !!inputElement.checked;
           this.lastValue = checked;
-          updateConsumerElements(this.parentElement, consumers, checked);
+          updateConsumerElements(consumers, checked, providerTemplate);
           return;
         }
         this.lastValue = event.target.value;
         if (event.target.value === '') {
-          updateConsumerElements(this.parentElement, consumers, '');
+          updateConsumerElements(consumers, '', providerTemplate);
         } else {
           let targetValue = inputElement.type === 'number' ?
             Number(event.target.value) : event.target.value;
-          updateConsumerElements(this.parentElement, consumers, targetValue);
+          updateConsumerElements(consumers, targetValue, providerTemplate);
         }
       }, debounceDelay);
     };
@@ -158,14 +159,15 @@ class InputProvider extends HTMLElement {
     if (inputElement.type !== 'checkbox') {
       onInputKeyUp = async (event) => {
         debounce(async () => {
+          let providerTemplate = this.getAttribute('provider-template');
           if (event.target.value === this.lastValue) return;
           this.lastValue = event.target.value;
           if (event.target.value === '') {
-            updateConsumerElements(this.parentElement, consumers, '');
+            updateConsumerElements(consumers, '', providerTemplate);
           } else {
             let targetValue = inputElement.type === 'number' ?
               Number(event.target.value) : event.target.value;
-            updateConsumerElements(this.parentElement, consumers, targetValue);
+            updateConsumerElements(consumers, targetValue, providerTemplate);
           }
         }, debounceDelay);
       };

package/model-input.js

@@ -8,6 +8,7 @@ class ModelInput extends SocketConsumer {
     this.isReady = false;
     this.inputElement = null;
   }
+
   connectedCallback() {
     this.isReady = true;
     this.destroy = () => {};
@@ -22,10 +23,7 @@ class ModelInput extends SocketConsumer {
     return [
       'input-id',
       'list',
-      'model-instance-property',
-      'collection-instance-property',
-      'bind-to-model',
-      'bind-to-collection',
+      'socket-instance-property',
       'type',
       'placeholder',
       'consumers',
@@ -89,10 +87,7 @@ class ModelInput extends SocketConsumer {
 
   render() {
     this.innerHTML = '';
-    let bindToModel = this.hasAttribute('bind-to-model');
-    let modelInstanceProperty = this.getAttribute('model-instance-property');
-    let bindToCollection = this.hasAttribute('bind-to-collection');
-    let collectionInstanceProperty = this.getAttribute('collection-instance-property');
+    let socketInstanceProperty = this.getAttribute('socket-instance-property');
     let showErrorMessage = this.hasAttribute('show-error-message');
     let inputId = this.getAttribute('input-id');
     let autocapitalize = this.getAttribute('autocapitalize');
@@ -107,76 +102,43 @@ class ModelInput extends SocketConsumer {
     let height = this.getAttribute('height');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
     let enableRebound = this.hasAttribute('enable-rebound');
-    let currentNode = this.parentNode;
-    let model;
-    let isModelLocal = false;
-    if (bindToCollection) {
-      collectionInstanceProperty = 'collection';
-    }
-    if (collectionInstanceProperty) {
-      let collection;
+
+    let socket;
+    if (socketInstanceProperty) {
+      let currentNode = this.parentNode;
       while (currentNode) {
-        collection = currentNode[collectionInstanceProperty];
-        if (collection && collection.type !== modelType) {
-          collection = null;
-        }
-        if (collection && (!collection.agModels || !collection.agModels[modelId])) {
-          collection = null;
-        }
-        if (collection) break;
+        socket = currentNode[socketInstanceProperty];
+        if (socket) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
-      if (collection) {
-        model = collection.agModels[modelId];
-        if (!model.agFields[modelField]) {
-          model.addField(modelField);
-        }
-      }
+      if (!socket) {
+        throw new Error(
+          `The ${
+            this.nodeName.toLowerCase()
+          } element failed to bind to a socket via the ${
+            socketInstanceProperty
+          } socket-instance-property`
+        );
+      };
+    } else {
+      socket = this.getSocket();
     }
-    if (!model) {
-      if (bindToModel) {
-        modelInstanceProperty = 'model';
-      }
-      currentNode = this.parentNode;
-      if (modelInstanceProperty) {
-        while (currentNode) {
-          model = currentNode[modelInstanceProperty];
-          if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
-            model = null;
-          }
-          if (model && !model.agFields) {
-            model = null;
-          }
-          if (model) break;
-          currentNode = currentNode.getRootNode().host || currentNode.parentNode;
-        }
-        if (!model) {
-          throw new Error(
-            `The ${
-              this.nodeName.toLowerCase()
-            } element failed to bind to a model - Ensure that the element is nested inside a parent element which exposes a model instance of the same type with a ${modelField} field`
+    this.socket = socket;
+    let model = new AGModel({
+      socket: this.socket,
+      type: modelType,
+      id: modelId,
+      fields: [ modelField ],
+      enableRebound
+    });
+    if (!hideErrorLogs) {
+      (async () => {
+        for await (let { error } of model.listener('error')) {
+          console.error(
+            `Model input encountered an error: ${error.message}`
           );
-        };
-      } else {
-        this.socket = this.getSocket();
-        model = new AGModel({
-          socket: this.socket,
-          type: modelType,
-          id: modelId,
-          fields: [ modelField ],
-          enableRebound
-        });
-        if (!hideErrorLogs) {
-          (async () => {
-            for await (let { error } of model.listener('error')) {
-              console.error(
-                `Model input encountered an error: ${error.message}`
-              );
-            }
-          })();
         }
-        isModelLocal = true;
-      }
+      })();
     }
     if (model.isLoaded) {
       this.setAttribute('is-loaded', '');
@@ -240,22 +202,21 @@ class ModelInput extends SocketConsumer {
     this.destroy = () => {
       destroyInputSync();
       this.isLoadedConsumer && this.isLoadedConsumer.kill();
-      if (isModelLocal) {
-        model.destroy();
-      }
+      model.destroy();
     };
   }
 
   updateInputElement(inputElement, fieldValue) {
     let consumers = this.getAttribute('consumers');
+    let providerTemplate = this.getAttribute('provider-template');
     if (inputElement.type === 'checkbox') {
       let checked = !!fieldValue;
       inputElement.checked = checked;
-      updateConsumerElements(this.parentElement, consumers, checked);
+      updateConsumerElements(consumers, checked, providerTemplate);
     } else {
       let defaultValue = this.getAttribute('default-value') || '';
       inputElement.value = fieldValue == null ? defaultValue : fieldValue;
-      updateConsumerElements(this.parentElement, consumers, inputElement.value);
+      updateConsumerElements(consumers, inputElement.value, providerTemplate);
     }
   }
 
@@ -303,12 +264,14 @@ class ModelInput extends SocketConsumer {
     let debounce = debouncer();
 
     let onInputChange = (event) => {
-      if (event.target.value === String(model.value[fieldName])) return;
       debounce(async () => {
+        if (event.target.value === String(model.value[fieldName] || '')) return;
+
+        let providerTemplate = this.getAttribute('provider-template');
         try {
           if (inputElement.type === 'checkbox') {
             let checked = !!inputElement.checked;
-            updateConsumerElements(this.parentElement, consumers, checked);
+            updateConsumerElements(consumers, checked, providerTemplate);
             await model.update(fieldName, checked);
             inputElement.classList.remove(errorStyleClass);
             inputElement.classList.add(successStyleClass);
@@ -316,12 +279,12 @@ class ModelInput extends SocketConsumer {
             return;
           }
           if (event.target.value === '') {
-            updateConsumerElements(this.parentElement, consumers, '');
+            updateConsumerElements(consumers, '', providerTemplate);
             await model.delete(fieldName);
           } else {
             let targetValue = inputElement.type === 'number' ?
               Number(event.target.value) : event.target.value;
-            updateConsumerElements(this.parentElement, consumers, targetValue);
+            updateConsumerElements(consumers, targetValue, providerTemplate);
             await model.update(fieldName, targetValue);
           }
           inputElement.classList.remove(errorStyleClass);
@@ -340,14 +303,17 @@ class ModelInput extends SocketConsumer {
     if (inputElement.type !== 'checkbox' && inputElement.type !== 'select') {
       onInputKeyUp = async (event) => {
         debounce(async () => {
+          if (event.target.value === String(model.value[fieldName] || '')) return;
+
+          let providerTemplate = this.getAttribute('provider-template');
           try {
             if (event.target.value === '') {
               await model.delete(fieldName);
-              updateConsumerElements(this.parentElement, consumers, '');
+              updateConsumerElements(consumers, '', providerTemplate);
             } else {
               let targetValue = inputElement.type === 'number' ?
                 Number(event.target.value) : event.target.value;
-              updateConsumerElements(this.parentElement, consumers, targetValue);
+              updateConsumerElements(consumers, targetValue, providerTemplate);
               await model.update(fieldName, targetValue);
             }
             inputElement.classList.remove(errorStyleClass);

package/model-text.js

@@ -20,10 +20,7 @@ class ModelText extends SocketConsumer {
 
   static get observedAttributes() {
     return [
-      'model-instance-property',
-      'collection-instance-property',
-      'bind-to-collection',
-      'bind-to-model',
+      'socket-instance-property',
       'model-type',
       'model-id',
       'model-field',
@@ -39,84 +36,49 @@ class ModelText extends SocketConsumer {
 
   render() {
     this.innerHTML = '';
-    let bindToModel = this.hasAttribute('bind-to-model');
-    let modelInstanceProperty = this.getAttribute('model-instance-property');
-    let bindToCollection = this.hasAttribute('bind-to-collection');
-    let collectionInstanceProperty = this.getAttribute('collection-instance-property');
+    let socketInstanceProperty = this.getAttribute('socket-instance-property');
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
-    let currentNode = this.parentNode;
-    let model;
-    let isModelLocal = false;
-    if (bindToCollection) {
-      collectionInstanceProperty = 'collection';
-    }
-    if (collectionInstanceProperty) {
-      let collection;
+
+    let socket;
+    if (socketInstanceProperty) {
+      let currentNode = this.parentNode;
       while (currentNode) {
-        collection = currentNode[collectionInstanceProperty];
-        if (collection && collection.type !== modelType) {
-          collection = null;
-        }
-        if (collection && (!collection.agModels || !collection.agModels[modelId])) {
-          collection = null;
-        }
-        if (collection) break;
+        socket = currentNode[socketInstanceProperty];
+        if (socket) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
-      if (collection) {
-        model = collection.agModels[modelId];
-        if (!model.agFields[modelField]) {
-          model.addField(modelField);
-        }
-      }
+      if (!socket) {
+        throw new Error(
+          `The ${
+            this.nodeName.toLowerCase()
+          } element failed to bind to a socket via the ${
+            socketInstanceProperty
+          } socket-instance-property`
+        );
+      };
+    } else {
+      socket = this.getSocket();
     }
-    if (!model) {
-      if (bindToModel) {
-        modelInstanceProperty = 'model';
-      }
-      currentNode = this.parentNode;
-      if (modelInstanceProperty) {
-        while (currentNode) {
-          model = currentNode[modelInstanceProperty];
-          if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
-            model = null;
-          }
-          if (model && !model.agFields) {
-            model = null;
-          }
-          if (model) break;
-          currentNode = currentNode.getRootNode().host || currentNode.parentNode;
-        }
-        if (!model) {
-          throw new Error(
-            `The ${
-              this.nodeName.toLowerCase()
-            } element failed to bind to a model - Ensure that the element is nested inside a parent element which exposes a model instance of the same type with a ${modelField} field`
+    this.socket = socket;
+    let model = new AGModel({
+      socket: this.socket,
+      type: modelType,
+      id: modelId,
+      fields: [ modelField ]
+    });
+    if (!hideErrorLogs) {
+      (async () => {
+        for await (let { error } of model.listener('error')) {
+          console.error(
+            `Model text encountered an error: ${error.message}`
           );
-        };
-      } else {
-        this.socket = this.getSocket();
-        model = new AGModel({
-          socket: this.socket,
-          type: modelType,
-          id: modelId,
-          fields: [ modelField ]
-        });
-        if (!hideErrorLogs) {
-          (async () => {
-            for await (let { error } of model.listener('error')) {
-              console.error(
-                `Model text encountered an error: ${error.message}`
-              );
-            }
-          })();
         }
-        isModelLocal = true;
-      }
+      })();
     }
+
     if (model.isLoaded) {
       this.setAttribute('is-loaded', '');
       this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
@@ -142,9 +104,7 @@ class ModelText extends SocketConsumer {
     this.destroy = () => {
       changeConsumer.kill();
       this.isLoadedConsumer && this.isLoadedConsumer.kill();
-      if (isModelLocal) {
-        model.destroy();
-      }
+      model.destroy();
     };
   }
 }

package/model-viewer.js

@@ -16,19 +16,14 @@ class ModelViewer extends SocketConsumer {
 
   connectedCallback() {
     this.isReady = true;
-    this.socket = this.getSocket();
     this.activeLoader = null;
     this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
     this.render();
   }
 
   disconnectedCallback() {
-    if (this.model && this.isModelLocal) {
+    if (this.model) {
       this.model.destroy();
-    } else {
-      if (this.modelLoadConsumer) this.modelLoadConsumer.kill();
-      if (this.modelChangeConsumer) this.modelChangeConsumer.kill();
-      if (this.modelErrorConsumer) this.modelErrorConsumer.kill();
     }
     this.shadowRoot.removeEventListener('slotchange', this.handleSlotChangeEvent);
   }
@@ -93,43 +88,38 @@ class ModelViewer extends SocketConsumer {
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelFields = this.getAttribute('model-fields') || '';
-    let modelInstanceProperty = this.getAttribute('model-instance-property');
+    let socketInstanceProperty = this.getAttribute('socket-instance-property');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
 
-    if (this.model && this.isModelLocal) this.model.destroy();
+    if (this.model) this.model.destroy();
 
-    let currentNode = this.parentNode;
-    let model;
-    if (modelInstanceProperty) {
+    let socket;
+    if (socketInstanceProperty) {
+      let currentNode = this.parentNode;
       while (currentNode) {
-        model = currentNode[modelInstanceProperty];
-        if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
-          model = null;
-        }
-        if (model && !model.agFields) {
-          model = null;
-        }
-        if (model) break;
+        socket = currentNode[socketInstanceProperty];
+        if (socket) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
-      if (!model) {
+      if (!socket) {
         throw new Error(
           `The ${
             this.nodeName.toLowerCase()
-          } element failed to obtain a model via the specified model-instance-property - Ensure that the element is nested inside a parent element which exposes a model instance of the same type which has the relevant fields`
+          } element failed to bind to a socket via the ${
+            socketInstanceProperty
+          } socket-instance-property`
         );
       };
-      this.model = model;
-      this.isModelLocal = false;
     } else {
-      this.model = new AGModel({
-        socket: this.socket,
-        type: modelType,
-        id: modelId,
-        fields: modelFields.split(',').map(field => field.trim()).filter(field => field)
-      });
-      this.isModelLocal = true;
+      socket = this.getSocket();
     }
+    this.socket = socket;
+    this.model = new AGModel({
+      socket: this.socket,
+      type: modelType,
+      id: modelId,
+      fields: modelFields.split(',').map(field => field.trim()).filter(field => field)
+    });
 
     this.shadowRoot.innerHTML = `
       <slot name="loader"></slot>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "2.15.2",
+  "version": "3.0.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -17,8 +17,8 @@
   "author": "Jonathan Gros-Dubois",
   "license": "MIT",
   "dependencies": {
-    "ag-collection": "^4.1.0",
-    "ag-model": "^2.1.0",
+    "ag-collection": "^5.0.0",
+    "ag-model": "^3.0.0",
     "capitalisk-auth-client": "^1.5.1",
     "socketcluster-client": "^19.1.0"
   },

package/utils.js

@@ -89,6 +89,10 @@ export function createReactiveCollection(collectionOptions, callback) {
     }
   })();
 
+  if (collection.isLoaded) {
+    collection.safeValue = collection.value.map(toSafeModelValue);
+  }
+
   return collection;
 }
 
@@ -120,6 +124,10 @@ export function createReactiveModel(modelOptions, callback) {
     }
   })();
 
+  if (model.isLoaded) {
+    model.safeValue = toSafeModelValue(model.value);
+  }
+
   return model;
 }
 
@@ -142,6 +150,10 @@ export function createCollection(collectionOptions) {
     }
   })();
 
+  if (collection.isLoaded) {
+    collection.safeValue = collection.value.map(toSafeModelValue);
+  }
+
   return collection;
 }
 
@@ -162,6 +174,10 @@ export function createModel(modelOptions) {
     }
   })();
 
+  if (model.isLoaded) {
+    model.safeValue = toSafeModelValue(model.value);
+  }
+
   return model;
 }
 
@@ -232,8 +248,8 @@ export function renderTemplate(templateString, data, socket) {
   });
 }
 
-export function updateConsumerElements(parentElement, consumers, value) {
-  if (parentElement && consumers) {
+export function updateConsumerElements(consumers, value, template) {
+  if (consumers) {
     let consumerParts = consumers.split(',')
       .filter(part => part)
       .map(part => {
@@ -242,8 +258,15 @@ export function updateConsumerElements(parentElement, consumers, value) {
       })
       .filter(([ selector, attributeName ]) => selector);
 
+    if (template) {
+      value = renderTemplate(
+        template,
+        { value }
+      );
+    }
+
     for (let [ selector, attributeName ] of consumerParts) {
-      let matchingElements = parentElement.querySelectorAll(selector);
+      let matchingElements = document.querySelectorAll(selector);
       if (attributeName) {
         for (let element of matchingElements) {
           if (typeof value === 'boolean') {