Riot Inline Schema

Riot markup tags to help serialize forms into JSON.

Overview

The schema tags can be used to decorate riot based forms for easy serialization of inputs into JSON. The serializer works by iterating over all of the schema tags while extracting values into JSON as necessary. It will return a newly created JSON representation of the schemas structure you can then use to submit to an api endpoint. Currently the following tags are available schema-array, schema-object, schema-string, schema-number.

Install

npm install riot-inline-schema --save

Example

In this example we create a simple form with a products object that contains a name string and a categories array which contains a list of strings. schema-string and schema-number will traverse their child tags until they find an instance that contains either a value variable or value function. This allows for custom non-traditional input fields to be used as long as they contain either a value variable or function.

<my-form>
  <schema-object name="products">
    <schema-string name="name">
      <input type="text" />
    </schema-string>
    <schema-array name="categories">
      <schema-string>
        <input type="text" />
      </schema-string>
    </schema-array>
  </schema-object>

  <script>
    this.mixin('schema');
    var result = this.serialize(this);
  </script>
</my-form>

The result of serializing the form would be a JSON representation demonstrated below.

{
  "products": {
    "name": "",
    "categories": [""]
  }
}

Tags

Object

<schema-object>

</schema-object>

Array

The array tag takes 2 arguments name and items if items is left blank an array with a length of 1 will be created and assigned to the tag. The schema-array tag needs to be immediately followed by either a schema-object, schema-number or schema-string tag to designate the type of data stored within the array. Array looping is handled automatically by yielding the inner contents of the tag on each iteration.

<schema-array>

</schema-array>

Number

<schema-number>

</schema-number>

String

<schema-string>

</schema-string>