CODEWITHSUNDEEP
cachingcode-injectionaurelia
Evangelos Aktoudianakis
Evangelos Aktoudianakis

Reputation: 755

Aurelia - injecting a service, but its properties remaining undefined

I have a service:

import {eventsData} from 'services/eventsData';
import {singleton} from 'aurelia-framework';

@singleton()
export class DataRepository{
    constructor(){        
    }

    getEvents(){
        var promise = new Promise((resolve,reject)=>{
                if(!this.events){
                    setTimeout(_=>{
                        this.events = eventsData;
                        resolve(this.events);
                    },2000)
                }
                else{
                    resolve(this.events);
                }
        });
        return promise;
    }

    getEvent(eventId){              
        return this.events.find(event => event.id == eventId);                
    }
}

which I am initiating as is in:

import {inject} from 'aurelia-framework';
import {DataRepository} from 'services/datarepository';


    @inject(DataRepository)
    export class events{    
        constructor(dataRepository, lazyOfImLazy){
            dataRepository.getEvents().then(events => this.events = events);        
        }

        createAndUseLazy(){
            console.log("About to use lazy");
            this.lazyOfImLazy().doStuff();
        }
    }

And then in :

import {inject} from 'aurelia-framework';
import{DataRepository} from 'services/dataRepository';

@inject(DataRepository)
export class EventDetail{
    constructor(dataRepository){
        this.dataRepository = dataRepository;
    }

    activate(params, routeConfig){
        console.log(params.eventId);
        console.log(this.dataRepository);
        this.event = this.dataRepository.getEvent(1);
    }
}

But when calling this.dataRepository.getEvent(1), then in dataRepository return this.events.find(event => event.id == eventId);, the this.events is undefined. I would have thought that by defining it as a singleton it would preserve this.events, when being instantiated in the promise. And the this.events is then populated properly. The view of events is using it.

Am I missing something?

Upvotes: 0

Views: 295

Answers (1)

Evangelos Aktoudianakis
Evangelos Aktoudianakis

Reputation: 755

Figured it out: The imports are case sensitive.

import{DataRepository} from 'services/datarepository'; and import{DataRepository} from 'services/dataRepository'; notice the lower cased r in datarepository in the first line and the capital one in dataRepository in the second.

It creates two different instances of the same service, due to the different case sensitivity in the string after from.

For those who ever encounter this, and spent hours trying to figure it out :)

Upvotes: 1

Related Questions