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

[Klaas Johan Kooistra]

Ok. Good to know it is there. I still would prefer to put the data into 
the attribute itself though if possible. I'm currently trying to 
implement it with an array like stephan suggested, which seems to be 
working quite well.


On 14/07/14 15:15, Benjamin Beck wrote:
> Hi.
> Now that you mention it .. I´m not sure if the second example works (:
>
> You might also have a look at:
> http://fluidtypo3.org/viewhelpers/vhs/master/Asset/ScriptViewHelper.html
> https://github.com/FluidTYPO3/vhs
>
> With this you should be able to put the JS part into a external file ..
>
> example:
>
> <v:asset.script name="unique-name-for-this-js" external="1" standalone="1" allowMoveToFooter="1">
> 	var link = {f:uri.action(action: 'theAction')}
> 	var variable = {variable}
>
> 	..
> </v:asset.script>
>
>
>
> On 14.07.2014, at 14:12, Klaas Johan Kooistra <k.j.kooistra at youwe.nl> wrote:
>
>> 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
>>>
>>
>> _______________________________________________
>> TYPO3-dev mailing list
>> TYPO3-dev at lists.typo3.org
>> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-dev
>