CODEWITHSUNDEEP
aurelia
crypted
crypted

Reputation: 10306

Render different view dynamically in Aurelia

Is there any way in aurelia I can render different view dynamically.

  async Activate(booking) {
    //booking: is the route param
    const hasRecord = await this.service.RecordExists(booking);
    if (hasRecord) {
            map(booking,form);
    }
    return {
        //Render different template
    }

}

Upvotes: 1

Views: 293

Answers (1)

Arne Deruwe
Arne Deruwe

Reputation: 1110

You should try to tackle this issue in another way. Why would you want to navigate to a ViewModel and trigger its creation, just in order to not use it and load another ViewModel? Seems inefficient at best right?

Aurelia exposes pipelines on the router, you should do this check there and redirect accordingly. Look at the PreActivate step here, you could write something like this (pseudo code):

configureRouter(config, router) {
    function step() {
      return step.run;
    }
    step.run = async (navigationInstruction, next) => {
      if(await this.service.RecordExists(navigationInstruction.queryParams...)
      {
         return next()
      } else {
         next.cancel(new Redirect('your other page'))
      }
    };
    config.addPreActivateStep(step)
    config.map([
      { route: ['', 'home'],       name: 'home',       moduleId: 'home/index' },
      { route: 'users',            name: 'users',      moduleId: 'users/index',   nav: true },
      { route: 'users/:id/detail', name: 'userDetail', moduleId: 'users/detail' },
      { route: 'files/*path',       name: 'files',      moduleId: 'files/index',   href:'#files',   nav: true }
    ]);
  }

EDIT

You can have cases where you don't want a redirect, for example you have users wanting to bookmark baseurl/businessobject/id, and the url is navigatable before the object actually exists Then you can use the getViewStrategy() function on your ViewModel:

getViewStrategy(){
    if(this.businessObj){
       return 'existingObjectView.html';     
    } else {
       return 'nonExisting.html';
    }
}

Upvotes: 4

Related Questions