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

[Klaas Johan Kooistra]

A little update on the solution I used, based on my initial example:

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

And with view helper:

<f:link.action additionalAttributes="{data-click: \"{w:format.json(value: {
	<exactly the same configuration here>
})}\" }">test</f:link.action>

The escaped double quotes allow the use of single quotes within the 
array as usual.

An added advantage is that it's "cleaner" and therefore easier to read. 
Additionally less JavaScript is needed since module and method don't 
need to be split any longer and only arrays are processed now (object 
and string before).

The only disadvantage so far is that I have no idea how to pass real 
boolean values to the JSON, since Fluid uses 1 and 0. I guess that will 
have to do for now.


Thanks again to everyone for your ideas.

On 14/07/14 14:05, Klaas Johan Kooistra wrote:
> 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
>>
>