当前位置: 动力学知识库 > 问答 > 编程问答 >

Use array object from javascript use-api into javascript with sightly

问题描述:

I have a javascript use-api file that returns an array. It's important to know that this js is used in other html, that's why i can't put the code on the html

Something like this (myfile.js):

"use strict";

var global = this;

use(function() {

var myArray = [];

//something to fill the array with custom objects and inner arrays

return myArray;

});

Then in my html i have some code but the most important is that i need to use this array in javascript but i can't figure out how to do it because if i use the context='scriptString' or context='scriptToken' it doesn't work and i cant use the array.

This is the code:

<div data-sly-use.test="myfile.js">

<!-- some html irrelevant code -->

<script type='text/javascript'>

//this returns a flat string representation of the first level of the array

var a = '${test @context='scriptString'}';

//this give an error in the code

var b = ${test @context='scriptString'};

//this returns empty

var c = '${test @context='scriptToken'}';

</script>

</div>

Is there a way to use this array (without modifying myfile.js file)

网友答案:

I suggest if you want to put variables into the array you just use the following (and stick with purely javascript:

   <div data-sly-use.test="myfile.js">

   <script type='text/javascript'>    

    var a = myArray[n];

   </script>

</div>

Where n is equal to the object number in the array that you want to return the value of.

This way you have no need to edit the javascript file and it makes everything much more simple!

网友答案:

I just did tests myself and it worked fine. Here's what I did.
Just a note, this is on AEM 6.1 (without SP1)

test.html:

<div data-sly-use.test="test.js">
    <script type="text/javascript">
        var test = [${test @context="scriptString"}];       
    </script>
    This is a TEST!
</div>
<div class="clearfix"></div>

test.js:

"use strict";

use(["/libs/wcm/foundation/components/utils/AuthoringUtils.js"], function (AuthoringUtils) {

    return [0,1,2,3,4,5];

});

and this is the resulting html

<div class="test">    
<div>
    <script type="text/javascript">
        var test = [0,1,2,3,4,5];       
    </script>
    This is a TEST!
</div>
<div class="clearfix"></div>
</div>
网友答案:

Sounds like you have a JS object, array in this case, that you want to use on both the server-side and the client-side. You build it server-side using the Use-API and use it however you need to in the sightly templates, then you're trying to add the same object to a <script> tag so that the client can also use it. Is this correct? If so then try one of these, if you haven't already

<div data-sly-use.test="myfile.js">
<!-- some html irrelevant code -->

 <script type='text/javascript'>
     //scriptToken context, no quotation marks
     var b = ${test @context='scriptString'};
     //unsafe context, hope you trust the source of this object!
     var c = ${test @context='unsafe'};
 </script>
</div>

Hoever, if you do not need the JS object on the server-side then there's no need ot use the Use-API. Just create a separate sightly file which adds the javascript to the page, and include it in the sightly files that need it.

/apps/path/to/shared/myfile.html

<script type="text/javascript">
  var global = this;

  var myArray = [];
  //something to fill the array with custom objects and inner arrays
  //etc.
 </script>

Then the templates that need that JS simply include it

<div>
  <!-- some html irrelevant code -->
  <sly data-sly-include="path/to/shared/myfile.html"></sly>
</div>
分享给朋友:
您可能感兴趣的文章:
随机阅读: