How to use <script> in the Aurelia?

1

I am new to Aurelia. For the following example, I know that the code between <body> will be in home.html inside <template>. But where will the code between <script> will be? inside home.js?

<!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements by Id</h2>

<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>

<p id="demo"></p>

<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML = 
"The text from the intro paragraph is " + myElement.innerHTML;
</script>

</body>
</html>

Is there a way to have something like this in Aurelia?
<script src="~/src/script/site.js"></script>

1 Like
2

This depends on what that site.js is? For example, is this utilities inside the aurelia site, functions that control a specific page, etc.??? If this is simply code to use for the home page (your home.js/html viewmodels) then you’d want to put your viewmodel code inside the home.js which will work with the view because it’s following the proper naming convention when home is routed to. If this is some custom code you’d like to use within your site then you could place it in your main.js which is your initial loading script. If it’s just a custom JS library you’d simply call import '/path/to/script.js';. If you made it a js module then you could DI it just like import {MyThingy} from 'path/to/script.js';within the viewmodels you want to use it in.

1 Like
3

Yes it have JavaScript DOM Methods. Like the example above:

var myElement = document.getElementById(“intro”);
document.getElementById(“demo”).innerHTML =
"The text from the intro paragraph is " + myElement.innerHTML;

1 Like
4

Hmmm. If what you are attempting to do is to manipulate the DOM such as in your example, then you would simply place the functionality for that code within it’s viewmodel. For example, you are wanting to do something with your home page and you’ve setup a view/viewmodel for your home page (which would be home.js and home.html) then you’d place all your logic for the home view inside the view model (home.js). I realize your example above is just that, an example but if you didn’t already know this, you don’t need to use that format to inject content into the DOM. You can use string interpolation and don’t even need to traverse the element in the DOM. Even if you did need access to a DOM element inside your view, you can use the rel="myElem" attribute and have access to that DOM element within your viewmodel with this.myElem. I’d suggest installing a sample app via aurelia’s CLI tool. Using the “Custom App” option you’ll be able to specify a “navigation app” for a more real world example app that will have routing examples baked in.

2 Likes
5

Thanks for this. I want to change the background color based on the innerhtml. Am I doing it right?

<template><div ref="myElem">White</div>
</template>

changeBackgroundColor() {
        var text = this.myElem.element.innerHTML;
        if (text == "white") {
            this.myElem.style.setProperty('background-color', 'white');
        }
    }
1 Like
6

This use case is a bit odd, but in any case it should be enough to just do

<template><div ref="myElem" style="background-color: ${myElem.innerText}">white</div></template>

No scripting necessary.

1 Like
7

Can you explain how that value is set inside the <template />? I’m assuming this is a value that’s going to dynamically change and if you have access to that model/variable that the value is coming from then you can easily use the method that @jwx is suggesting but test against the model/variable rather than parsing the innerHTML. I’d also suggest using the css attribute rather than style if you are setting properties inside the attribute rather than a model (object literal). See HERE for the style binding.

2 Likes
8

Hi @adn, welcome! I think you have some fundamental misunderstandings about how Aurelia is intended to be used. I highly suggest going through the two official tutorials here to learn about component-based architectures. They will teach you how to structure your application (how to separate your HTML from your JavaScript in different files) and how to use Aurelia to avoiding doing things like calling getElementById and setting innerHTML manually.

1 Like