This is an extension for luri which allows binding between javascript objects and DOM elements.
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.
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