Basic Usage: Working with external data - Level-2/Transphporm GitHub Wiki

External Data

You can write content to an element using:

h1 {content: "My Page Title";}

However, most of the time the content for the page isn't going to be known at the time you're writing the display logic.

Transphporm allows you to reference external data which can be supplied when the template is rendered. This is done by passing a data structure (either an array or an object) to the output method. e.g.

$data = [
    'name' => 'Tom',
    'email' => '[email protected]'
];

$template = new \Transphporm\Builder($xml, $tss);

echo $template->output($data);

Once you have passed some data to the template it can be referenced using Transphporm's data() function. This allows you to reference any data which has been passed in to the output method.

span {content: data(name);}
a {content: data(email);}

Which, using this XML:

<div>
Name: <span>name</span>
Email: <a>email address</a>
</div>

Will generate:

<div>
Name: <span>Tom</span>
Email: <a>[email protected]</a>
</div>

You can combine data and static strings inside the TSS and concatenate them using the , separator. For example to generate the correct mailto link on the <a> element, it's possible to do the following:

a:attr(href) {content: "mailto:", data(email); }

Which will generate the following HTML:

See the page on Attributes for more information on writing to attributes

Data structures

If you have a two dimensional array, or complex object you can read properties using the dot notation. For example:

$blog = [
  'title' => 'My Blog Post',
  'author' => [
        'firstname' => 'Tom',
        'surname' => 'Butler'
   ];
];

Assuming the entire $blog variable is passed in to the output method, You can read the author's names using:

div.name {content: data(author.firstname); }
div.surname {content: data(author.surname); }

Of course, you can also use concatenation to join them together:

div.name {content: data(author.firstname), " ", data(author.surname); }

N.B. Objects Using __get()

If you are trying to access a property of an object with the magic method __get() then you must also set the magic method __isset() (see #88)

⚠️ **GitHub.com Fallback** ⚠️