View Introduction

Template View

At it's core, a view simply renders some HTML. A user interface is composed of views.

In meta4, a view is described using nested JSON objects.

{ "id": "views:my_view",
  "widget": "Template",
  "template": "Hello World"
}

The above snippet creates a unique view [views:my_view] that will be rendered using the "Template" widget. The widget simply renders the text "Hello World".

Model View

Each view is bound to a data model. By default, a view uses it's own configuration as it's data model.

The "template" parameter allows you to use Moustache {{}} syntax to render the model.

{ "id": "views:my_view_2",
  "widget": "Template",
  "hello": "Hello World",
  "template": "{{hello}}"
}

Collections View

Frequently, you want to render a list of related items. We'll feed our view a "collection" of models.

In this example, we'll use the "ActionList" widget. It repeats the "child.template" for each item in the JSON collection.

{   "id":       "views:my_list",
    "widget":   "ActionList",
    "child": {
        "template": "{{label}}"
    },
    "collection": [
        { "id": "item1", "label": "Item 1",
        { "id": "item2", "label": "Item 2"
    ]
 }

CRUD View

Most applications need to create, read, update & delete (CRUD) data. Meta4 includes a CRUD view that provides the necessary plumbing to make wire-framing simple.

A CRUD view introduces a number of new capabilities. The first, Nested Views,

{ "id": "views:my_view_2",
  "widget": "CRUD",
  "collection": "models:my_list",
  "views" {
    "create": "views:my_view_2/create",
    "read": "views:my_view_2/read",
    "update": "views:my_view_2/update"
 }
}

The sub-views are rendered when the related action is triggered. You'll note that the "views" and the "collection" are resolved automatically.

Using the reference approach it's possible to build modular applications, re-use views and collections in multiple places.