Class: View - JustJs

just.View(optionsnullable)

Templarize elements easily.

Source:: just.js, line 3459

Parameters:

Name

Type

Description

options
_[nullable]

object

Any just.View property.

Properties

Name	Type	Default	Description
`id`	just.View#id		Use either this or `element`.
`element`	just.View#element		Use either this or `id`.
`data`	just.View#data		Data available on all updates for this view.
`attributes` _[optional]	string or just.View#attributes	data-var	Set it to a string to use it as a prefix or set it to an object with this properties.

Example

Example 1: Generate elements based on one element.

<html>
<body>
  <ol>
    <li
      id='item'
      class='template'
      data-var-for='item in items as data-item'
      data-item-if='visible'
      hidden>
      <span
        data-item='${loop.index}. ${capitalize(item.text)} is visible!'
        data-item-attr='{
          "title": "Updated: ${updated}."
        }'></span>
    </li>
  </ol>
  <script src='/just.js'></script>
  <script>
    var view = new just.View({
      id: 'item',
      data: {
        capitalize: function (string) { return string[0].toUpperCase() + string.slice(1).toLowerCase(); },
        items: [{
          visible: true,
          text: 'first item'
        }, {
          visible: false,
          text: 'second item'
        }, {
          visible: true,
          text: 'third item'
        }]
      }
    });

    // Do some work...

    view.refresh({
      updated: new Date().toString()
    });
  </script>
</body>
</html>

Members

globals :object

Data available for all instances of just.View.

Source:: just.js, line 3540

Type:

object

INIT_ATTRIBUTE_NAME :string

Default attribute to query elements in just.View.init.

Source:: just.js, line 3533

Type:

string

Name	Type	Default	Description
`var` _[optional]	string	${prefix}	The attribute for text replacements.
`html` _[optional]	string	${prefix}-html	The attribute for html replacements.
`attr` _[optional]	string	${prefix}-attr	The attribute for attribute replacements.
`if` _[optional]	string	${prefix}-if	The attribute for conditional/if replacements.
`as` _[optional]	string	${prefix}-as	The attribute for alias replacements. Scoping is not supported yet.
`for` _[optional]	string	${prefix}-for	The attribute for loops replacements. Only arrays are supported now.
`on` _[optional]	string	${prefix}-on	The attribute for listener replacements.

data :object

Data for this instance. Available on all updates.

Source:: just.js, line 3481

Type:

object

element :Node

The template element.

Source:: just.js, line 3476

Type:

Node

id :string

Id for the template element.

Source:: just.js, line 3471

Type:

string

original :object

Original properties for this instance.

Source:: just.js, line 3522

Type:

object

previousData :object

Previous data set after a just.View#update.

Source:: just.js, line 3515

Type:

object

Methods

attachListeners(element, datanon-null, attributeNamenon-null) → {object}

Parse an attribute as a json and set keys as event names/types and values as listeners. Values are accessable properties that require a function as final value.

Source:: just.js, line 3682

Parameters:

Name	Type	Description
`element`	Node	The target element.
`data`	object	Data for the accessable properties, containing the listeners.
`attributeName`	string	Name of the attribute that contains the parseable json.

Returns:

The attached listeners, with event.types as keys.

Type: object

getAliases(element, datanullable, attributeNamenullable) → {object}

Define aliases using a stringified JSON from an element attribute; access object values and set keys as alias.

Source:: just.js, line 3996

Parameters:

Name	Type	Description
`element`	Element	The target element.
`data` _[nullable]	object	Some object.
`attributeName` _[nullable]	string	The name for attribute containing a stringified json.

Returns:

An object containing keys as alias.

Type: object

init(options) → {Array.<View>}

Find elements with the just.View.INIT_ATTRIBUTE_NAME attribute, parse its value as json, and call just.View with those options.

A few things to consider:

options support (nested) data replacement, using the ${} sintax:
- You can use {"data": {"${key}": ["${get.value(0)}"]}} to replace ${key}, and ${get.value(0)} with your own values defined in View.globals and options.listeners.
- You can use this to replace it with the current element. E.g: ${this.id}.
- In current versions, you don't need to enclose ${} in quotes to replace variables, since that's the only way you can replace them on stringified objects. I.e:
  - {${var}: [${var}]} is valid. (Equivalent to {[var]: var}).
  - {"${var}": ["${var}"]} is also valid, but different. (Equivalent to {[`${var}`]: `${var}`}).
  - {var: [var]} is invalid (for now), and will throw an error.
  Since replacements are sometimes required, you can use that sintax for now, but in the future, that sintax is likely to be removed.
Default values for undefined replacements are null:
E.g: ["one", "two", ${three}]. If three is undefined, the result will be ["one", "two", null].
E.g: "Hello ${world}!". If world is undefined, the result will be "Hello null!".

Source:: just.js, line 3644

Parameters:

Name

Type

Description

options

object

Properties

Name	Type	Description
`listeners`	object	Listeners for the View#attachListeners call.

Returns:

The created views.

Type: View[]

Example

Example 1: Generate elements based on one element using minimum javascript.

<html>
<body
    data-just-View='{"element": ${this}}'
    data-var-on='{"init": "onInit"}'>
  <ol>
    <li
      id='item'
      class='template'
      data-var-for='item in items as data-item'
      data-item-if='visible'
      data-just-View='{
        "element": ${this},
        "data": {
          "items": [{
            "visible": true,
            "text": "first item"
          }, {
            "visible": false,
            "text": "second item"
          }, {
            "visible": true,
            "text": "third item"
          }]
        }
      }'
      hidden>
      <span
        data-item='${loop.index}. ${capitalize(item.text)} is visible!'
        data-item-attr='{
          "title": "Updated: ${updated}."
        }'></span>
    </li>
  </ol>
  <script src='/just.js'></script>
  <script>
    just.View.init({
      listeners: {
        onInit: function (e) {
          // This will refresh all [data-var] attributes.
          this.view.refresh(e.detail);
        }
      }
    });

    // Trigger the "init" event:
    document.body.dispatchEvent(
      new CustomEvent('init', {
        detail: {
          updated: new Date().toString()
        }
      })
    );
  </script>
</body>
</html>

replaceVars(value, datanullable, defaultValue) → {string}

Replace placeholders (${}, eg. ${deep.deeper}) within a string.

Source:: just.js, line 3819

Parameters:

Name	Type	Description
`value`	string or object	Some text or an object. If an object is given, it will just.View.resolveConditionals first, then replace `${placeholders}` within the accessed value.
`data` _[nullable]	object	An object containing the data to be replaced.
`defaultValue`	Any	By default, it skips replacements if some accessed value is undefined. Any other value will be stringified (returned to the String#replace function).

Returns:

The replaced string. If some value is undefined, it won't be replaced at all.

Type: string

Examples

Example 1: Using a string

just.View.replaceVars('${splitted.property}!', {
    'splitted': {'property': 'hey'}
}); // > "hey!"

Example 2: Using an object

just.View.replaceVars({
    'a': 'Show ${a}',
    'b': 'Show ${b}'
}, {'b': 'me (b)'}); // > "Show me (b)"

Example 3: Inexistent property

just.View.replaceVars("Don't replace ${me}!") // "Don't replace ${me}!"

Example 4: Setting a default value for an inexistent property

just.View.replaceVars('Replace ${me}', null, 'who?') // "Replace who?"

resolveConditional(condititionalnullable) → {*|boolean}

Access to an object and return its value.

Source:: just.js, line 3726

Parameters:

Name	Type	Description
`condititional` _[nullable]	string	Expected keys splitted by ".". Use "!" to negate a expression. Use "true" to return true.

Returns:

if the conditional is negated, a boolean. Else, the accessed value.

Type: Any or boolean

resolveConditionals(conditionals, datanullable) → {*}

Access to multiple conditionals and return the first value that is truthy.

Source:: just.js, line 3751

Parameters:

Name	Type	Description
`conditionals`	object or string	An object containing conditions (expected properties) as keys, or a string containing a condition (a expected property).
`data` _[nullable]	object	An object with all the properties.

Returns:

View.resolveConditional()'s returned value.'

Type: Any

updateAttributes(element, datanullable, attributeNamenullable) → {boolean}

Create dynamic attributes after replacing variables in values. Please note that null/undefined values won't be replaced.

Source:: just.js, line 3963

Parameters:

Name	Type	Description
`element`	Element	The target element.
`data` _[nullable]	object	Some object.
`attributeName` _[nullable]	string	The name for attribute containing a stringified json.

Returns:

true if the attribute contains some value, false otherwise.

Type: boolean

updateConditionals(element, datanullable, attributeName) → {boolean}

Show/Hide an element (by setting/removing the [hidden] attribute) after evaluating the conditional found in the given attribute.

Source:: just.js, line 3935

Parameters:

Name	Type	Description
`element`	Element	The target element.
`data` _[nullable]	object	Some object.
`attributeName`	string	The name for the queried attribute.

Returns:

True if resolved (and hidden), false otherwise.

Type: boolean

updateHtmlVars(element, datanullable, attributeNamenullable) → {boolean}

Update the element's markup using just.View.updateVars and element.innerHTML.

Source:: just.js, line 3913

Parameters:

Name	Type	Description
`element`	Element	The target element.
`data` _[nullable]	object	Some object.
`attributeName` _[nullable]	string	The name for the queried attribute.

Returns:

true if the value was updated, false otherwise.

Type: boolean

updateLoops(element, data, attributeName) → {Array.<View>}

Iterate over an array to create multiple elements based on a given template (element), append them in order, and update each generated element.

Source:: just.js, line 4078

Parameters:

Name	Type	Description
`element`	Node	The target element.
`data`	Object	The data.
`attributeName`	string	The attribute containing the loop expression.

Returns:

The updated views or null.

Type: View[]

updateVars(element, datanullable, attributeNamenullable, setteropt, nullable) → {boolean}

Update the element's text if the attribute's value is different from the accessed value.

Source:: just.js, line 3877

Parameters:

Name	Type	Default	Description
`element`	Element		The target element.
`data` _[nullable]	object		Some object.
`attributeName` _[nullable]	string		The name for the queried attribute.
`setter` _{[optional] [nullable]}	just.View~updateVars_setter	element.textContent	If set, a function to update the element's text. Expects a boolean to be returned. Else, element.textContent will be used to set the updated value and return true.

Returns:

true if the value was updated, false otherwise. Any other value will be casted to a Boolean.

Type: boolean

append(containernullable)

Call just.View#insert to perform an append of the current template element.

Source:: just.js, line 4403

Parameters:

Name	Type	Description
`container` _[nullable]	Node

attachListeners(listenersnullable)

Call just.View.attachListeners.

Source:: just.js, line 4440

Parameters:

Name	Type	Description
`listeners` _[nullable]	object	An object in the format: `{eventType: fn}`.

Create a clone of an element, remove the .template class, the [hidden] attribute, and the [id] after setting it as a class on the clon. Set just.View#element to the new clon and return the current instance.

Source:: just.js, line 4275

Throws:

if the template is not a Node.

Type: TypeError

getData(currentDatanon-null) → {object}

Merges all available data into one object in the following order: just.View.globals, just.View#data, currentData, and aliases.

Source:: just.js, line 4219

Parameters:

Name	Type	Description
`currentData`	object	It merges this object after globals, and locals, and before setting aliases.

Returns:

Type: object

getElement()

Source:: just.js, line 4207

Returns:

just.View#element or query element by just.View#id.

getUpdatables(container|documentopt, nullable) → {Array.<Node>}

Find all elements that contain a supported attribute and return them.

Source:: just.js, line 4246

Parameters:

Name	Type	Description
`container\|document` _{[optional] [nullable]}	Node

Returns:

All matching elements within the given container

Type: Node[]

insert(position, containernullable)

Insert just.View#element at the given position into the given container.

Source:: just.js, line 4380

Parameters:

Name	Type	Description
`position`	string or object.<{before: Node}>	- `"before"` will insert the element before the first child. - `{"before": Node}` will insert the element before the given Node. - else (other values): will use `appendChild()` by default.
`container` _[nullable]	Node	The Node that will contain the element.

Throws:

if a container can't be guessed.

Type: TypeError

prepend(containernullable)

Call just.View#insert to perform an prepend of the current template element, at the beginning.

Source:: just.js, line 4414

Parameters:

Name	Type	Description
`container` _[nullable]	Node

refresh(newData, skip)

Update the view using just.View#previousData (set on update) and newData. Useful to update the view with previous values or update only some properties, after a normal update.

Source:: just.js, line 4357

Parameters:

Name	Type	Description
`newData`	Any	Any new data.
`skip`	just.View#update~skip	skip argument.

reset()

Restore constructor to its default value. Use the #original property to restore it.

Source:: just.js, line 4425

update(data, skipnullable)

Update all updatable elements by querying them and calling all possible update* functions, like: - just.View.updateConditionals. - just.View.updateAttributes. - just.View.updateHtmlVars. - just.View.updateVars. - just.View.updateLoops. (In that order).

Source:: just.js, line 4311

Parameters:

Name	Type	Description
`data`	Any	Data for the update. Merged with just.View#getData().
`skip` _[nullable]	function	A function called on each updatable element. if a truthy value is returned, the update won't take place.

Type Definitions

updateLoops_expression

Expression in the format: "currentItem in accessed.array[ as updatableAttribute][,[ cache=true]]".

Where text enclosed in brackets is optional, and:

currentItem is the property containing the current iteration data.
accessed.array is a property to be accessed that contains an array as value.
updatableAttribute is the name of the attribute that will be updated afterwards by View#update.
Setting cache will update existing elements, using each element as template. By default, this is true because it improves performance, but it also means that new modifications to each element will be replicated. If you set this to false, all generated elements will be removed before updating them, causing new modifications to be removed, but also hurting performance.

Source:: just.js, line 4017

Type:

string

Examples

Example 1.

"item in some.items"
// Will iterate over `some.items`, set `item` to each element (some.items[0], some.items[1], and so on...), and make `item` available under the default attribute.

Example 2.

"item in some.items as data-item"
// Will iterate over `some.items`, set `item` to each element, and make `item` available under the [data-item] attribute only.

Example 3.

"item in some.items as data-item, cache=false"
// Will iterate over `some.items`, set `item` to each element, make `item` available under the [data-item] attribute only, and recreate each element instead of updating it.

updateLoops_loopData

Loop data. Contains loop data for the current iteration.

Source:: just.js, line 4046

Properties:

Name	Type	Description
`index`	number	The current index.
`array`	array	The array.
`length`	number	The array's length.
`left`	number	Left elements' count.

Type:

object

access(keys, datanullable)

Access to properties using the dot notation. Supports nested function arguments replacements and reserved keywords. See just.View~parseArguments.

Source:: just.js, line 3300

Parameters:

Name	Type	Description
`keys`	string	Accessable properties using the dot notation.
`data` _[nullable]	object	Accessable data.

Example

access('a.b(c(d))', {
  'a': {'b': function (v) { return v + 'b'; }},
  'c': function (v) { return v + 'c'; },
  'd': 'd'
}); // > 'dcb';

parseArguments(string, data) → {Array}

Parse argument-like strings ("a, b, c") and return valid JSON values.

Source:: just.js, line 3227

Parameters:

Name	Type	Description
`string`	string	Argument-like string without quotes, like "a, b, c".
`data`	object	Accessable data.

Returns:

Arguments.

Type: Array

Example

parseArguments("a, b, c", {})

updateVars_setter(element, text) → {boolean}

A function to set the updated value.

Source:: just.js, line 3854

Parameters:

Name	Type	Description
`element`	Element	The target element.
`text`	string	The updated text.

Returns:

true if updated, false otherwise.

Type: boolean

Parameters:

Properties

Example

Members

globals :object

Type:

INIT_ATTRIBUTE_NAME :string

Type:

attributes :object

Properties:

Type:

data :object

Type:

element :Node

Type:

id :string

Type:

original :object

Type:

previousData :object

Type:

Methods

attachListeners(element, datanon-null, attributeNamenon-null) → {object}

Parameters:

Returns:

getAliases(element, datanullable, attributeNamenullable) → {object}

Parameters:

Returns:

init(options) → {Array.<View>}

Parameters:

Properties

Returns:

Example

replaceVars(value, datanullable, defaultValue) → {string}

Parameters:

Returns:

Examples

resolveConditional(condititionalnullable) → {*|boolean}

Parameters:

Returns:

resolveConditionals(conditionals, datanullable) → {*}

Parameters:

Returns:

updateAttributes(element, datanullable, attributeNamenullable) → {boolean}

Parameters:

Returns:

updateConditionals(element, datanullable, attributeName) → {boolean}

Parameters:

Returns:

updateHtmlVars(element, datanullable, attributeNamenullable) → {boolean}

Parameters:

Returns:

updateLoops(element, data, attributeName) → {Array.<View>}

Parameters:

Returns:

updateVars(element, datanullable, attributeNamenullable, setteropt, nullable) → {boolean}

Parameters:

Returns:

append(containernullable)

Parameters:

attachListeners(listenersnullable)

Parameters:

create()

Throws:

getData(currentDatanon-null) → {object}

Parameters:

Returns:

getElement()

Returns:

getUpdatables(container|documentopt, nullable) → {Array.<Node>}

Parameters:

Returns:

insert(position, containernullable)

Parameters:

Throws:

prepend(containernullable)

Parameters:

refresh(newData, skip)

Parameters:

reset()