Library · Code examples

HTML5 data attribute with JSON data

As the title says. Builds the html Object like: id="#s1043" data-test="{"myVarName":"1"}"

 

Here output was quoted but jquery read it without problems and it's validating.

Description HTML5 data attribute as JSON data in fluid contentelement
Author githubrsys
Creation date 2015-01-08T12:04:51.000Z
Extensions
  1. FluidTYPO3.Fluidcontent
  2. FluidTYPO3.Vhs
Tags
  1. Content
Files
  1. test.html
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers">
<f:layout name="Content"/>
<f:section name="Configuration">
<flux:form id="foo" label="bar" description="Lorem" options="{useTypoScript: 0, group: 'Foo', Fluidcontent: {sorting: 400}, icon: '{f:uri.resource(path: \'Icons/foo.png\')}'}">
<flux:form.section name="bar">
<flux:field.select name="individualFoo" items="default" default="default" label="bar"/>
</flux:form.section>
</flux:form>
</f:section>
<f:section name="Preview">
<flux:widget.grid/>
</f:section>
<f:section name="Main">
<v:asset name="foo{record.uid}" dependencies="jquery" debug="0" fluid="TRUE">
<script>console.log($('#s{record.uid}').data('test').myVarName)</script>
</v:asset>
<v:variable.set value="{myVarName:individualFoo}" name="iFoo"/>
<div id="s{record.uid}" data-test='{iFoo -> v:format.json.encode()}'></div>
</f:section>
</div>
view raw test.html hosted with ❤ by GitHub