ClientDependency Framework & Razor, add custom JS

Question

I'm trying to get the hang of ClientDependency Framework. https://github.com/Shazwazza/ClientDependency I use it in an Umbraco website.

I'm having a problem with some custom javascript (not in a file) that I want to run.

I want to run a function (which is in "functions.js"), but with a different parameter per page.

So, I add the following to my template:

Html.RequireJs("~/scripts/functions.js", 1);

And on my masterpage before the -tag I've added:

@Html.RenderJsHere()

But where do I place my function-call? I can't just add it to my template, because "functions.js" isn't loaded yet (it's at the bottom of my masterpage).

I've thought about creating a js-file for each call and add them to the Html.RequireJs(...) but that isn't a great solution.

Is there a way to add inline-script to the list of "JS-to-render" ?

edit: I was just trying to get it to work using RenderSection(), but that doesn't seem to work when the section is defined on a macro?

edit: I don't have the code here at the moment I'm typing this, but the idea is like this:

functions.js

function WriteToConsole(input) {
    console.log('Log', input);
}

template1.cshtml

@{Html.RequireJs("functions.js");}
<script>
    WriteToConsole("This is from template 1");
</script>

template2.cshtml

@{Html.RequireJs("functions.js");}
<script>
    WriteToConsole("This is from template 2");
</script>

master.cshtml

<body>
    @RenderBody()

    @Html.RenderJsHere()
</body>

Just to give an idea of what I'm trying to do. As you can imagine, the <script> part on my template is now being called before functions.js is included. And this results in an error.

Or am I handling this whole thing wrong?

score 0 · Answer 1 · answered Jul 05 '18 at 15:25

Are you trying to alter the script call in: Html.RequireJs("~/scripts/functions.js", 1); ?

So something like Html.RequireJs("~/scripts/functions.js?myparam=xyz", 1); Is this what you are trying to achieve but having the url be dynamic?

If so you could do something like this :

//perhaps have some logic above to determine what the query should be and concatenate it to the string like so.
string query = "?myparam=xyz";
string scriptcall = "~/scripts/functions.js"+query ;
Html.RequireJs(scriptcall, 1);

Could you provide more code so we can see what you are trying to do? Maybe list in steps on how it should work?

ClientDependency Framework & Razor, add custom JS

1 Answers1