Use renderers with Presenter

Renderers are easy to embed in Presenter components. Renderers make it easy to share formatting and styling across components and are optimised for fast-moving financial data.

Before reading this section you should probably be familiar with the Presenter library.

Starting point

Here’s a text label that has an unformatted price in it

renderer presenter start

It’s generated from the following presentation model:

app.bladeSet.blade.examplePresentationModel = function()
    this.price = new"1.234567890");
        //this data would usually come from a streaming server
              , caplin.presenter.PresentationModel);

and this HTML template:

<div id="app.bladeSet.blade.view-template">
   <span data-bind="text:price"></span>

Create a renderer

We’ll create a simple Renderer that just formats the price to 4 decimal places. Presenter has the ability to use fomatters, but in practice you may have much more complicated Renderers to make it worthwhile embedding a renderer.

<?xml version="1.0" encoding="UTF-8"?>
<rendererDefinitions xmlns="">
<renderer type="test.test.test.examplePriceButton">
  <control className="caplin.control.basic.TextControl"/>
   <transform className="caplin.element.formatter.DecimalFormatter">
    <attribute name="dp" value="4" />

Get presenter to use the new Renderer

Update the HTML template to reference the Renderer type in its data-bind attribute:

<div id="test.test.test.view-template">
   <span data-bind="value:price, renderer:'test.test.test.examplePriceButton'"></span>

Once you refresh the page, you should now see the formatted value:

renderer presenter done