The JSONMVC API

This page will present API and how to create Modules.

Application

The create a JSONMVC application is simple:

import jsonmvc from 'jsonmvc'

jsonmvc({
    views: {},
    models: {},
    controllers: {},
    data: {}
})

jsonmvc accepts an object with:

views, models and controllers contain modules (see bellow #modules)
data the initial data and data schema (see bellow #data)

Modules

There is only one syntax to learn:

{
    args: {},
    fn: args => {}
}

This is a simple JavaScript object that you'll use everywhere - for Views, Controllers and Models.

args is an { key: string } object for data binding
fn is a Function that transforms the received data. It returns:
- html - for views
- data - for models
- patches - for controllers

Example

Let's say we have the following data in our application:

{
    foo: {
        bar: 123
    },
    baz: 'The Baz!'
}

We will make our args:

{
    args: {
        someBar: '/foo/bar',
        theBaz: '/baz'
    },
    fn: args => {

        args.someBar // 123
        args.theBaz // The Baz!

        return args.theBaz + ' ' + args.someBar // The Baz! 123
    }
}

Where /foo/bar and /baz are JSON Pointers that point to the value at that data path.

And someBar and theBaz are the data using in fn to create a new value.

Creating a view

{
    args: {
        title: '/app/title'
    },
    fn: args => '<h1>{{ args.title }}</h1>'
}

Creating a Controller

{
    args: {
        time: '/actions/button/timestamp'
    },
    fn: args => ({
        op: 'add',
        path: '/text',
        value: `Button clicked at ${args.time}`
    })
}

Creating a Model

{
    path: '/user/fullName',
    args: {
        name: '/user/name',
        surname: '/user/surname'
    },
    fn: args => args.name + ' ' + args.surname
}

Data

Data object has two properties initial and schema.

As the names suggest the initial will be the initial data that will exist in the application and schema will define how valid data looks like. See Sample Application for an example.

API