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

[Stephan Schuler]

Hey there.

Skip the CDATA parts and use a Json(Encode)ViewHelper for this. TYPO3 core doesn't come with an official one, but you might have ExtensionBuilder at hand which provides one.

<f:link.action additionalAttributes='{
        data-click : { method: { url: "{f:uri.action(action: \"theAction\")}" } -> eb:json() }
}' />

You might notice that I skipped the "Module:" thing as well as the quotes of the property keys since this is not supported by Fluid. Maybe you find a way around this.

Regards,


Stephan Schuler
Web-Entwickler

Telefon: +49 (911) 539909 - 0
E-Mail: Stephan.Schuler at netlogix.de
Website: media.netlogix.de






--
netlogix GmbH & Co. KG
IT-Services | IT-Training | Media
Neuwieder Straße 10 | 90411 Nürnberg
Telefon: +49 (911) 539909 - 0 | Fax: +49 (911) 539909 - 99
E-Mail: info at netlogix.de | Internet: http://www.netlogix.de

netlogix GmbH & Co. KG ist eingetragen am Amtsgericht Nürnberg (HRA 13338)
Persönlich haftende Gesellschafterin: netlogix Verwaltungs GmbH (HRB 20634)
Umsatzsteuer-Identifikationsnummer: DE 233472254
Geschäftsführer: Stefan Buchta, Matthias Schmidt



-----Ursprüngliche Nachricht-----
Von: typo3-dev-bounces at lists.typo3.org [mailto:typo3-dev-bounces at lists.typo3.org] Im Auftrag von Klaas Johan Kooistra
Gesendet: Montag, 14. Juli 2014 10:45
An: typo3-dev at lists.typo3.org
Betreff: [TYPO3-dev] JSON objects in view helper data attributes

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.
_______________________________________________
TYPO3-dev mailing list
TYPO3-dev at lists.typo3.org
http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-dev