2sxc - Place a @Content.field var in a javascript file

Question

In this simple example: https://jsfiddle.net/4hxsu4rc/2/

Is it possible to place the @Content.myVarIntoJsFile inside the js file that is included via <script src="myjs.js"></script> ? Since it is not part of the view template associated file (_myview.cshtml), it does not work by default.

The only way I can make this work is by having the whole JS content inside the _myview.cshtml like

<script type="text/javascript">
function myfunction(myvalue) {
    alert('@Content.myVarIntoJsFile' + myvalue);
}
</script>

but this makes the view template file harder to edit since the size will be considerable. How can I use @Content.field replacements in external JS files?

Best regards, João

Answer 1

There are a few options :)

What @joecraig was suggesting, is to use a system like

<div data-name="@Content.Name" data-age="@Content.Age">...</div>

to transport your data in html, for use in your javascript. This works well for simple use cases, and allows you to put your "business" logic in separate JS files.

The Pro-method is to use WebAPIs, get JSON-streams of the data you need, and have fun. Basically all 2sxc-data is easily available as json if you want it. To give you a perfect answer, I would need to know what JS-framework you're using.

For example, if you're using jQuery, then something like this will get you all items of type "Category"

var sxc = $2sxc(someTagInsideYourModule);
var dataPromise = sxc.webApi.get("app/auto/content/Category");
dataPromise.then(function(result) { /* do something */ });

You can read more about this on https://github.com/2sic/2sxc/wiki/WebApi

If you're using other frameworks - like AngularJS, there are helpers like the Query-Service or Content-Service.

PS: remember to enable read-permissions for the non-admin users, otherwise the code will only work when logged in.

Answer 2

One way to do it would be to create a hidden div and place into it the data from the content field. Use the id of the div to retrieve it.

Perhaps a better approach would be to use data-* attributes to store the data, which can be found by javascript.

This presumes you don't mind having the data in your page source.