I keep running into this error with an innerError of this:
TypeError: Cannot read property ‘isInitialized’ of undefined
The arrays I am trying to load are getting populated correctly from the database in the activate() method and they are publicly accessible. As far as I can tell I have the HTML written correctly.
This is an example:
[div class="form-group row"]
[label class="col-sm-4 control-label" for="request-type"]Request Type [span class="required"]${required}[/span][/label]
[div class="col-sm-8"]
[select id="request-type" class="form-control" value.bind="accessRequest.RequestType & validate"]
[option model.bind="null"][/option]
[option repeat.for="requestType of requestTypes" model.bind="requestType.AttributeValue"]${requestType.Value}[/option]
[/select]
[/div]
[/div]
It doesn’t matter if I try to coerce the binding value on the option by using value.bind. Do I need to decorate the array with something, and if so, what? I’ve tried @bindable () with no luck.
bigopon
December 14, 2017, 10:38pm
2
The template seems normal. Did you try commenting the repeat part out to see whether the error comes from there ?
That is exactly where the error is coming from. Removing the repeat allows the view to load with no errors.
bigopon
December 15, 2017, 12:27am
4
Can you reproduce it in a gist ? https://gist.run/?id=1ae985e6c943885496e8 (fork it and then update & share link)
It might be a few days before I can get to this. I’ve been pulled on to another project.
Here’s the fork, linked to my GitHub:
Aurelia Gist - Repeat Not Working
I don’t know if I included enough information in the Gist. I’m kind of new to this kind of development.
Not sure what happened, but here’s the fork:
app.html
<template>
<form>
<div class="form-group row">
<label class="col-sm-4 control-label" for="states">State <span class="required">${required}</span></label>
<div class="col-sm-8">
<select id="states" class="form-control" value.bind="accessRequest.State & validate">
<option model.bind="null"></option>
<option repeat.for="state of states" model.bind="state.Id">${state.Name}</option>
</select>
</div>show original
app.js
export class App {
states: Lookups.StatesLookup[] = [];
LoadLookup();
LoadLookup() {
states.push({
Id: '22C0BC0C-5998-E111-A9EE-000423B3BF41' Name: 'Alabama',
ShortName: 'AL', Filter: '^((AL)|(Alabama)|(0*1))$'
});show original
aurelia.bundle.js
aurelia.bundle.js:
function getObserver(instance, name) {
var lookup = instance.__observers__;
if (lookup === undefined) {
var ctor = Object.getPrototypeOf(instance).constructor;
var _behavior = _aureliaMetadata.metadata.get(_aureliaMetadata.metadata.resource, ctor);
if (!_behavior.isInitialized) {
_behavior.initialize(_aureliaDependencyInjection.Container.instance || new _aureliaDependencyInjection.Container(), instance.constructor);show original
There are more than three files. show original
Stepping through the code in Visual Studio Code, the lines in question seem to be in aurelia-templating-resources/src/abstract-repeater.js and aurelia-templating-resources/src/repeat.js. Repeat seems to be creating an object before it binds to the collection.
I’ve ported your code to the Gist @bigopon provided:
I noticed some details in your code that should/would cause problems:
In states.push() you’re missing a comma between Id: ... and Name: ...
You’re defining a class StandardLookup but pass ordinary objects to states. So the getter displayName doesn’t exist. You should create instances of your class or change the class to be an interface (without the getter)
Your call to LoadLookup(); is right within the class definition. Move it to an appropriate method like constructor(), attached() or something like that.
If your problem persists, please try to provide a full example using the Gist provided by @biopon . Just insert your code there, press Create Public Gist afterwards and insert the new url here.
1 Like
I thought I did create the Gist. I forked it as @bigopon suggested.
Be that as it may, I fixed the errors in the Gist. Here’s the URL:
And here is the fork URL:
app.html
<template>
<form>
<div class="form-group row">
<label class="col-sm-4 control-label" for="States">State <span class="required">${required}</span></label>
<div class="col-sm-8">
<select id="States" class="form-control">
<option model.bind="null"></option>
<option repeat.for="state of states" model.bind="state.Id">${state.Name}</option>
</select>
</div>show original
app.js
export class App {
constructor() {
// LoadLookup();
this.states = [
{ Id: '22C0BC0C-5998-E111-A9EE-000423B3BF41', Name: 'Alabama' },
{ Id: '20C0BC0C-5998-E111-A9EE-000423B3BF41', Name: 'Alaska' },
{ Id: '2EC0BC0C-5998-E111-A9EE-000423B3BF41', Name: 'Colorado' }
//...etc. Loads all U.S. states and territories.show original
aurelia.bundle.js
aurelia.bundle.js:
function getObserver(instance, name) {
var lookup = instance.__observers__;
if (lookup === undefined) {
var ctor = Object.getPrototypeOf(instance).constructor;
var _behavior = _aureliaMetadata.metadata.get(_aureliaMetadata.metadata.resource, ctor);
if (!_behavior.isInitialized) {
_behavior.initialize(_aureliaDependencyInjection.Container.instance || new _aureliaDependencyInjection.Container(), instance.constructor);show original
There are more than three files. show original
Remove public states; in app.js (TypeScript syntax again) and change the assignment to this.states = to assign it to a instance property.
Hi, I tried @justcoding suggestion:
It works.
Yes, doing that, it does work, but not in our environment. We are using Typescript and loading the dropdowns from a database.
My colleague has taken a look at what we have done, he has tried to rebuild the system again using the Webpack Skeleton, and gets the same errors.
Our working hypothesis at this point is a version mismatch within the Aurelia libraries that is playing well with Typescript.
1 Like
fritz
January 11, 2018, 3:40pm
13
hi ! im experiencing the same issue with jspm and typescript. changing the aurelia-templating version wont do any good. though the error is manifesting itself in different error messages. is there any way to provide list of compatible aurelia libraries.
fritz
January 11, 2018, 3:55pm
14
i reverted my config.js file back to an old version containing this list of libraries which made the thing work again :
“aurelia-animator-css”: “npm:aurelia-animator-css@1.0.1”,