The basics: $.var() $.target()

Concept

First of all, let's explain how DisplayJS works. DisplayJS is similar to jQuery on the syntax and some of the functions in it, so it means that DisplayJS will be easy to learn if you take the time to learn it (2h ~ 3h to learn it if you're a complete beginner). But, for the rest, DisplayJS was largely inspired and influenced by other frameworks such as Vue.js or Angular. These frameworks proved in the past that they were pretty good for building UIs and what DisplayJS does is bringing this efficiency to everyone, not only advanced developers. And finally, other languages and other libraries also influenced DisplayJS, such as NumPy for Python 🐍 (only for the array manipulation).

I truly believe that if you guys want to create something but you don't want your code to be super messy and you need something powerful to build your thing, just go with DisplayJS.

Basics

$.var()

The main function of DisplayJS is the $.var() function. This function helps you rendering variables on the DOM at 10^99999999 km/h (pretty fast though 😂).

How to use it?

Well, it's super simple. Just look at the example below:

HTML:

<p var="myVar"></p>

JS:

// Create the rendered text
var myVar = "Hello World!";
// Create a var for Display.JS. You don't have to add the $ var, you can change the name.
var $ = new DisplayJS(window);
// Will render the var once
$.var();

And this piece of code should give:

Hello World

So, this was the primary usage of this function, but it also takes arguments. Here is how the function works:

$.var(push) // push if the render interval in milliseconds, but if push = true, the live method is called. ⚠️ We don't recommend using the live method because it's currently unstable
// -> Will render the variables
// -> Will also call the if else rendering method (see on the if...else page)

As I said, do not use the live rendering method, because it requires to be in an array, not in the window and also requires to have an object that changes at least every 100ms. Here is a good example of the $.var() function.

In v2.1, you can use objects with a .:

<p var="person.name"></p>
<p var="person.address.city"></p>

// Create a var for Display.JS. You don't have to add the $ var, you can change the name.
var $ = new DisplayJS(window);
// Create an object 'person' who's name is 'Kevin', and he lives in New York.
var person = {name: 'Kevin', address: {city:'New-York'}};
// Rendering the DOM
$.var();

By the way, this function contains aliases which are $.render() & $.renderVariables()

$.target()

The target function is also super important. This function is basically the link between variables and inputs. We'll see how cool 😎 is this function through a concrete example 😉.

Let's say you have a text input and you want to reproduce the content of this input on an element in your page, or you have a search engine and you want to do like Google when you start typing. To do that, there is multiple way, the first one is incredibly easy with DisplayJS, the other one is also easy, but a bit harder if you don't know anything about AJAX. Hopefully, for ajax, I have something for you that you'll see in the ajax page.

But, let's focus on a simple example.

HTML:

<input target="name" placeholder="What's your name?">
<h1>Hello <span var="name"></span>!</h1>

JS:

// declaring the $ var as a display.js class
var $ = new DisplayJS(window)
// asigning a value for the var name
var name = "DisplayJS users"
// render a first time the vars, but not required
$.var()
// rendering all the inputs
$.target()

This snippet will, when you start typing your name, say:

Hello + your name

You can try it on the example section here

⚠️ The $.target() can accept a callback function to to other things than just render, but if you're using this method, the $.var() function won't be automatically called, so don't forget to do it manually 😊.

Now, you can continue reading the docs in the way you want to understand DisplayJS 😊

⚠️ Questions?

Don't hesitate to ask your questions ⁉️ in the issue part 😁