Extending DEER with Templates

Built in Templates

DEER contains a number of templates that can be used right out of the box. Using the deer-template attribute in addition to the deer-view attribute, you can call for any of these or your own custom templates simply by name.

<deer-view deer-id="http://example.com/ID" deer-template="json"></deer-view>

<deer-view deer-id="http://example.com/ID" deer-template="json">
  <pre>
    { 
      "@id": "http://example.com/ID",
      "name": "Example",
      "key": "value"
    }
  </pre>
</deer-view>

JSON (default)

This renders a <pre> element containing the JSON representation of the resolved object.

    { 
      "@id": "http://example.com/ID",
      "name": "Example",
      "key": "value"
    }
  

Entity

The object is scanned for a label of some type and the properties are presented as key/value pairs.

Example

@id

http://example.com/ID

name

Example

key

value

Person

Some object type of person is expected and basic information is rendered, if available. This example shows what it looks like without birthDate, deathDate, givenName, familyName, or depiction rendered.

Example

Example

Event

List

Collection

Custom Templates

Easily create a custom template by extending the deer-render module. Add a function to TEMPLATES that returns an HTML string or template literal that displays your object as you like. The example below adds a template named "example". When you create a new template, be aware that DEER converts the attribute value to lowercase.

TEMPLATES.example = function(obj, options={}){
    let tmpl = ``
    for(let char of obj.name){
        tmpl+=`${char}<br>`
    }
    return tmpl
}

<deer-view deer-id="http://example.com/ID" deer-template="example"></deer-view>

E
x
a
m
p
l
e