Nexus

dom. Nexus

Source:
Properties:
Name Type Description
model Object

the model passed to the constructor.

Bi-directional model ⟷ DOM bindings.

Methods

(inner) new(model)

Source:

Constructor.

Example
var nexus = dom.Nexus.new(model);
Parameters:
Name Type Description
model Object

a plain object storing your model.

(inner) bind(component, name, eventNameopt, view)

Source:

Bind a property in model to a component, on the given event name.

A component is an object with three fields:

  • new: function ComponentName(property, nexus, ...) → Element
    Build a new HTML element with any structure you need, and bind it to the given property in the model in nexus.
    property is the property/field name in the model, and
    nexus is a Nexus object built with new dom.Nexus(model)
    other parameters depend on the component. You can define this function with any parameters in any order, but normally you will need at least property and nexus to bind it to the model.
    Useful for creating the whole view in Javascript.
  • use: function ComponentName(view, property, nexus, ...) → Element
    Take the given HTML and bind it to the given property in the model in nexus.
    Useful for activating views built in HTML.
  • get: function get(element) → string
  • set: function set(element, value)
Example

Simplistic HTML editor with preview

<!DOCTYPE "html">
<html>
  <head>
    <meta charset="utf-8"/>
    <style type="text/css">
      textarea { float:left; margin-right:1em; width:30%; }
    </style>
  </head>
  <body>
    <script src="dom.js"></script>
    <script type="application/javascript">
      var model = { html: '<h1>Hello!</h1>\n<p>How are you?</p>\n' };
      var nexus = dom.Nexus.new(model);// nexus.model === model

      var TextArea = {
          new: function TextArea(property, nexus, attributes) {
              var view = dom(['textarea', attributes]);
              view.setAttribute('name', property);
              return this.use(view, nexus);
          },
          use: function TextArea(view, nexus) {
              return nexus.bind(this, view.name, 'input', view);
          },
          get: function get(view) { return view.value; },
          set: function set(view, value) { view.value = value; }
      };

      // This adds the component to the document's body element:
      dom([document.body, TextArea.new('html', nexus, {
        'autofocus': true,
        'placeholder': 'Some text',
        'rows': 40
      })]);

      var htmlPreview = dom(['div.preview']);
      dom([document.body, htmlPreview]);
      // Watch changes in model.currentText and parse it as HTML:
      nexus.addListener('html', function (model, name) {
          htmlPreview.innerHTML = model[name];
      });
    </script>
  </body>
</html>
Parameters:
Name Type Attributes Description
component Component

object with new, use, get, set members.
name string

property name in the model.
eventName string <optional>

event fired when the component changes, can be null to have only unidirectional binding from property to view, useful for instance in progress bars.
view Element

HTML element that is the view of the component.

(inner) changed(name, originopt)

Source:

Notify this Nexus of external changes in the model.

This can be nested: one Nexus for the main model, others for sub-models inside.

Example

Nested models

var model = { someProperty: "someValue", submodel: { "a": 1 } };
var parentNexus = dom.Nexus.new(model);
var childNexus = dom.Nexus.new(model.submodel);
// Notify parent when properties change here:
childNexus.addListener("*", function (model, property, origin) {
    parentNexus.changed('submodel', origin);
});
Parameters:
Name Type Attributes Description
name string

field name in the model, or '*' to indicate changes in unspecified fields so that all listeners will be notified. Several names* can be given at once as an array of strings: in that case, the listeners (dom.Nexus.addListener(name, listener)) will receive the first name their property parameter.
origin Element <optional>

view that caused the change, or null. You might use this to avoid infinite loops: the origin element will not recieve this event.

(inner) addListener(name, listener) → {Object}

Source:

Add a listener for changes in a field in the model. The listener will be called immediately as a way of triggering initialization. In this first call, the origin parameter will be a literal false to distinguish it from later changes.

Parameters:
Name Type Description
name string

field name in the model, or '*' to listen for any changes.
listener Listener

function (model, name, origin) that will be notified of changes, where model is the model, name is the name of the model property that changed, and origin is the component that caused the change (which can be undefined).
Returns:
  • reference that can be used later to remove this listener with dom.Nexus.removeListener(listenerReference).
Type
Object