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

[Klaas Johan Kooistra]

Hi and thanks for your response. This does seem like a possible 
solution. I could do something like:
{
	module: 'Some/Module',
	method: 'methodName',
	parameters: {
		url: '{f:uri(action: \'theAction\')}',
		callback: <repeat same structure>
	}
}

I'll see if I can get it going with this. Thanks again.

On 14/07/14 12:46, Stephan Schuler wrote:
> 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
>