Display

Display is a component used by many classes, including DynamicList, Roulette (...) that is used to compute the rendering of an object. It requires Templater.

By default, components that use a Display, will convert any standard configuration object (coming from a JSON configuration for instance) to a Display. For instance, if you use a DynamicList and pass it a standard object for the configuration of the display, DynamicList will automatically convert it to a Display.

The structure of the Display goes as follow:

 {
      template:_STRING_ or _OBJECT_ or false, //Optional, defaults to false
      html:_STRING_ or false, //Optional, defaults to false,
      oml:_OML_ //Optional, the oml for a placeholder, defaults to false,
      css:_STRING_ or _OBJECT_ or false, //Optional, defaults to false,         
 }

Templates

By logic, template supersedes html as it would make no sense to set the display markup twice. If template is set to a string, such as

  {
      template:'MyTemplate'
  }

Then the Display will fetch the template named 'MyTemplate' in Templater. Now, if the template is set to be bound to a property of an object, in this case, template expects the following format

  {
      template:{
           bind:_PROPERTY_
      }
  }

This tells the Display to use a specific template stored in Templater, and that the name of the template will be found in the value of the property of the object.

For instance, if we have a list of object, and each object has a type property, and that we base the name of the template to use over this property (provided each template is already stored in the templater), our configuration would look like this

 let list = [{name:'Hammer', type:'tool'}, {name:'Banana', type:'fruit'}];
 let config = {
      template:{
           bind:'type'
      }
 }

OSE

Note that all css expressions support OSE expressions, to evaluate or calculate a value based on the properties of the object.

  let config = {
      template:{
           bind:'{{!$group ? $type : $group}}'
      },
      css:{
           add:'{{$price > 1000 ? "expensive" : "cheat"}}'
      }
 }

You can also set up a dynamic template without using bind, if you wish to use more complex OSE expression

 let config = {
      template:'{{function return 'Something' + $someprop + '_' + $otherprop}}',          
 }

HTML

If you'd rather use the same HTML markup for every item and not store anything in the templater, you can use the html property instead, such as

 {...,
      html:'<span class="name">{{$name}}</span>'
 }

If you wish to know more about how to create dynamic markup, check out the page dedicated to Templater

CSS

Some components also offer to add a css class to the HTML markup representing each object. It works the exact same way as the template property, in the sense that you can use a string as the class

 {
      css:'classA classB'

 }

or you can bind the css class to a property of the object

  {
      css:{
           bind:_PROPERTY_,
           add:_STRING_,
           remove:_STRING_
      }
  }

OML

If you need to render a more complex object via a display (like in the case of a DynamicList that would render different objects per item), you can use the oml property.

 ...,
 oml:{
       "default:Carousel':{
            ...
       }
  }