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

[Klaas Johan Kooistra]

Hello. Thanks for your response. I actually wanted to get rid of the 
inline script tags using the data attributes. On the other hand when 
only configuring data I think I could live with it, as long as no logic 
is added.
I didn't know you could add JavaScript variables like in your second 
example by the way. Nice to know.


On 14/07/14 13:48, Benjamin Beck wrote:
> Hi,
>
> i often do it like this:
>
>
> <script>
> // this works with the parser
> var link = {f:uri.action(action: 'theAction')}
> var variable = {variable}
> </script>
>
> <script>
> <![CDATA[
> var jsObj = {
> 	"Module:method": {
>                "url": link
> 		“callback": {
>                        “Some/Module:callbackMethod": {
>                                “someValue": variable
>                        }
>                }
>        }
> }
> $(function(){
> 	$('#test').data('click',jsObj);
> });
> ]]>
> <script>
>
> <a id="test">test</a>
>
>
>
> OR
>
>
>
> <a id="test" href="javascript:void(0);" data-click='{
>        "Module:method": {
>                "url": link,
>                “callback": {
>                        “Some/Module:callbackMethod": {
>                                “someValue": variable
>                        }
>                }
>        },
>        "Module:method": {"test": "value"}
> }'>test</a>
>
>
>
> Greetings
> Benjamin
>
> On 14.07.2014, at 10:44, Klaas Johan Kooistra <k.j.kooistra at youwe.nl> wrote:
>
>> 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
>