@dukai.net/model NPM

Model

Dual use model for both server side and client side. Extends bimo model, to provide observable properties. Also its handling resources (static text context on various languages).

The ModelBase class is part of the "Minimal Stack".

constructor options:

// Model Constructor
constructor (data, resource, subcomponents) {
}

data:

A JSON object contains the initial values for the model. If a property not yet has value, it still must be specified with null so an observable property will be created.

resource:

The models are supporting external source for static text information. The feature also supports multiple languages.

In a plug-in there is a res sub-folder, which contains the static text in different languages:

en.json:

{
    "welcome": "Welcome",
    "question": "What would you like to do today,",
    "logout": "Logout"
}

de.json:

{
    "welcome": "Herzlich willkommen",
    "question": "Was möchtest du heute machen,",
    "logout": "Ausloggen"
}

hu.json

{
    "welcome": "Üdvözöllek",
    "question": "Mit szeretnél ma csinálni,",
    "logout": "Kilépés"
}

In the application level all JSON snippets are combined together and available for both client and server side. When a model created, using the variable "resource", the part of the JSON tree required for this specific model will be extracted based on selected language. The model will have a "res" property contains the static class.

Example (plug-in name: "user"):

// JSON for user loaded from server
const userJson = {
    "firstName": "Jane",
    "lastName": "Doe",
};
const userJson.language = window.app.language; // hu

class UserModel extends ModelBase {
	constructor(data = {}) {
        super(data, 'user');
    }
    
    /* Full name */
    fullName () {
        if (this.language === 'hu') {
            return `${this.lastName} ${this.firstName}`;
        } else {
        	return `${this.firstName} ${this.lastName}`;
        }
    }
}

const userModel = new UserModel(userJson);

const html = await this.render('user.dust', userModel);

Dust template, rendering this model:

<html>
    <body>
        <div>{res.welcome} {fullName}</div>
        <div>{res.question} {firstName}?</div>
        <div>{res.logout}</div>
    </body>
</html>

subcomponents:

Generally its better if one can keep the model as flat as possible, however that is not always possible:

{
    "firstName": "Jane",
    "lastName": "Doe",
    "age": 35,
    "address": {
        "zip": "12345",
        "unit": "1123",
        "street": "Main st 12",
        "city": "Los Angeles",
        "state": "CA",
        "country": "USA"
    },
    "education": {
        "schools": [...],
        "courses": [...],
        "hobbies": [...]
    }
    "otherDataWeDoNotCare": {
        ...
    }
}

The bimo model supports subcomponents, however creation time we must tell the model, which subcomponent properties we want to observe.

class UserModel extends ModelBase {
    constructor(data = {}) {
        super(data, 'user', ['address', 'education']);
    }
}

The ModelBase class provides a set of methods to help manage properties:

Method	Description
showTitle()	extracting from res resources showing title based "add" or "edit" mode.
showLanguage()	showing the presently used language name
hasItems()	boolean method, if the model contains this.items array
hasEntity()	boolean method, if the model contains this.entity object
editMode()	boolean method, if the model this.mode == 'edit'
listMode()	boolean method, if the model this.mode === 'list'
viewMode()	boolean method, if the model this.mode === 'view'
hasRole(role)	checks if specified role exists in this.roles array
isUpdate()	tells if model has "_id" property, which means it exists in the database.
createModel(obj, ModelClass, parent)	Creates a model by checking object or array sent and if not specified type, then it creates one by passing in the object into the class. This is how subcomponent (or array) can be added to the parent model dynamically.
defaults(obj, defaults)	Merging a set of defaults values with the same name to the original obj JSON data.
options(opts, selected)	creates options array for HTML select control. Input can be hash-table or array.
changed()	returns changed fields in hash format, field:value format.
reset()	clears out all changes occurred on the model.
add(key, value)	adds new observable property to model.
property(name, value)	adds non-enumerable property to model. When a model converted to JSON, these type of properties not included in the JSON. "res" property is such type.