Node.prototype.bind

Node.prototype.bind

Extension method to map data from a model to a Node and its descendants via binding decorators

• Syntax: {Node} {Node}.bind({any} model)
  • Parameters:
    • model: {any} The model to bind from
  • Returns: {Node} The node bind was called from
• Example:

<div id="view" bind-style-width="width">
  <span bind-textContent="text"></span>
</div>
<script>
  let view = document.getElementById('view');
  let model = {
    width: '10px',
    text: 'Some sample text'
  };
  view.bind(model);
</script>

Node.prototype.bind.configure

Performs a bind on a Node with alternative binding behaviors

• Syntax: {Node} Node.prototype.bind.configure({Object} settings, {Node} node, {any} model)
  • Parameters:
    • settings: {Object} Overrides for binding behavior
      • bindingDelim: {String} The delimiter used to separate property names in the attribute name. For example: bind-style-width will bind to a Node's width style. The default for this setting is '-'
      • bindingPrefix: {String} The attribute name prefix used to identify bindings. The default for this setting is 'bind-'
    • node: {Node} The node to bind to
    • model: {any} The model to bind from
  • Returns: {Node} The node that was passed to the call
• Example:

<div id="view" custom-bind-style_width="width">
  <span custom-bind-textContent="text"></span>
</div>
<script>
  let view = document.getElementById('view');
  let model = {
    width: '10px',
    text: 'Some sample text'
  };
  Node.prototype.bind.configure({
    bindingPrefix: 'custom-bind-',
    bindingDelim: '_'
  }, view, model);
</script>

Node.prototype.bind.settings

Retrieves the settings from a Node if it was used in a binding operation. Can write/overwrite new settings causing a Node to become a new binding scope.

• Syntax: {Object} Node.prototype.bind.settings({Node} node[, {Object} settings])
  • Parameters:
    • node: {Node} The Node to read from
    • (optional) settings: {Object} (re)configures/(re)scopes the node causing ancestor bind operations to stop at this node
      • bindingDelim: {String} The delimiter used to separate property names in the attribute name. For example: bind-style-width will bind to a Node's width style. The default for this setting is '-'
      • bindingPrefix: {String} The attribute name prefix used to identify bindings. The default for this setting is 'bind-'
  • Returns: {Object} The settings instance, if any, set on this Node
• Example:

<div id="outer">
  <span bind-textContent="text"></span> <!-- Will get binding -->
  <div id="inner">
    <span bind-textContent="text"></span> <!-- Will not get binding -->
  </div>
</div>
<script>
  let outer = document.getElementById('outer');
  let inner = document.getElementById('inner');
  Node.prototype.bind.settings(inner, {}); // <-- Starts a new, blocking scope at #inner
  outer.bind({text: 'outer text only'}); // <-- Will not bind past #inner
</script>