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

[Benjamin Beck]

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