luri-model

What is this

This is an extension for luri which allows binding between javascript objects and DOM elements.

How to use

The binding is realized explicitly by utilizing luri's event system. The model class acts like a factory and produces luri components which listen for changes on the model's properties and get updated accordingly.

const Model = require("luri-model");

class User extends Model {

  // Whatever methods there may be

}

let Auth = new User({
  id: 1,
  name: "Manix",
  age: 24
});

document.body.appendChild(luri.construct([
  luri.H1("Authenticated user info"),
  ["Name: ", Auth.prop("name")],
  ["Age: ", Auth.prop("age")]
]));

Then

Auth.set("age", 25);

As explained above, the prop method returns a luri component, the function definition is as follows

prop(prop, def = {}, renderer = null)

• prop is the name of the property the component will listen for.
• def is the definition the component will render, see concepts for more info.
• renderer is a function that gets called whenever a change occurs and is responsible for modifying the DOM. It is passed the model as the first argument and the property that changed or undefined as the second one. Typically you want to avoid passing this parameter, however it's available for the rare cases when it's needed.

Utility

Magic properties

You can define "magic" properties in the model class which will allow you to easily get or set values from its instances.

If we continue the example above, we can add magic methods to the user class by executing

User.magic(["name", "age"]);

And then we are able to call the respective methods on its instances

Auth.name(); // returns "Manix"
Auth.age(25); // sets the age to 25
Auth.age(); // returns 25