[TYPO3-dev] JSON objects in view helper data attributes

[Klaas Johan Kooistra]

Hello,

I’m currently working on a way to trigger RequireJS module methods from in data attributes. For example:

<a id="test" href="javascript:void(0);" data-click='{
	"Module:method": {
		"url": “{f:uri.action(action: \'theAction\')}",
		“callback": {
			“Some/Module:callbackMethod": {
				“someValue": {variable}
			}
		}
	},
	"Module:method": {"test": "value"}
}'>test</a>

The advantage of this format is that the data attribute value is automatically loaded as a JavaScript object. However, I can’t get this to work with view helpers. First of all it requires too much nesting, because the data attribute itself has to be defined within addiitonalAttributes. I tried using CDATA and escaping the quotes in any combination, but either the variables/view helpers inside the object don’t get parsed or it throws me an error (additionalAttributes should be an array but is a string because the parsing breaks on the curly braces).

The only way I managed to get it to work so far is by creating a custom view helper to assign the data to a variable using the templateVariableContainer and urlencoding it to prevent issues with non-escaped quotes. Unfortunately that also means I have to urldecode the data attribute value in the JavaScript and parse the JSON.

<n:assign variable="test" urlencode="1" value='<![CDATA[{
	"Module:method": {
		"url": "]]>{f:uri.action(action: \'theAction\')}<![CDATA[",
		...
	}
}]]>' />
<f:link.action additionalAttributes=“{data-click: ‘{test}'}” ...

I also looked into a way to set set array data (including the keys) from the template and json encoding it. I found an example of a view helper setting an array value using a property path. This may work for a few settings, but with too many options it will clutter the template and make the configuration hard to read.


Does anyone have an idea how to make this work? Thanks in advance for any thoughts on this.