CODEWITHSUNDEEP
javascriptfilecomponentsaurelia
jmrosal
jmrosal

Reputation: 191

Aurelia: custom elements doesn't render output as expected. Browser doesn't load js file.

I am trying to design custom elements with aurelia but I am running in the same problem over and over again: the browser loads the component's html file but not its brother js file. I am using es2016 starter kit 1.0.0-beta.1.2.0, jspm 0.16.15 and npm 2.11.2

Specifically, consider the (very) simple example. The component is (as expected) called test and its html and js files are, respectively, as below:

test.html:

<template>
<div>Name: ${name}</div>`
</template>`

test.js

import {bindable} from 'aurelia-framework';
export class Test {
@bindable name = "";
}

The component is called from the file app.html and the value of the property's name is set at app.js, as below:

app.html:

<template>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="./test.html"></require>

<div class="page-host">
      <test name.bind="name"></test>
</div>
</template>

app.js:

export class Welcome {
   name = 'My Test';
}

After getting the local server to run, the output is simply:

Name:

While the expected output was: Name: My test.

What I have noticed: 1) If I go to sources, folder dist at google chrome's develop tools, I see the following files loaded: app.html; app.js and test.html. That is, test.js simply doesn't appear there. 2) if a write test.html as below:

 <template bindable="name">
 <div>Name: ${name}</div>
 </template>

I have the expected output: Name: My Test

I should be missing something really silly that I can't quite figure out. Any hints on what may be going on? Txs

Upvotes: 0

Views: 717

Answers (1)

PW Kad
PW Kad

Reputation: 14995

You are telling the loader to only load the html file when you append .html at the end of the import - 

<require from="./test.html"></require>

You need to remove that like this - 

<require from="./test"></require>

Upvotes: 5

Related Questions