Aurelia oneTime binding Behaviour

Question

I want to know why Aurelia oneTime binding is behaving like this. I have an HTML like this.

<span> ${dbaName & oneTime}</span>
<input type="text" value.bind="dbaName" spellcheck="false" />

My View-model is like this in typescript and after the success of ajax call i am assigning the value to dbaName :

export class VendorGeneral 
{
      dbaName:string;
      constructor()
      {
      }

      activate()
      {
        $.ajax({
          url: "servicecall",
          context: document.body
        }).done(function() {
          this.dbaName = "DATA ADMIN";
        });
      }
}

Now What HTML will show the output as:

<span> ${dbaName & oneTime}</span> **blank**
<input type="text" value.bind="dbaName" spellcheck="false" /> **DATA ADMIN**

In Span, I will get blank value or an empty string whereas in the textbox I will get Data Admin as a value which is correct.

Please let me know why oneTime bind is giving empty string and how to fix this?

Fabio Luz Fabio Luz · Accepted Answer · 2017-06-18T23:33:10

The oneTime, as the name suggest, will bind only once and all further changes will be ignored. When the view is rendered, the value of dbaName is undefined. So, the span's content will be undefined, which is equals to 'nothing';

I see that you're using activate, but you're using in the wrong way. If you want the view to be rendered after the return of the ajax call, you have to return a promise in the activate method. Something like:

activate {
   return yourPromise()
     .then(() => this.dbaName = 'admin');
}

I recommend you to use aurelia-fetch-client instead of $.ajax. If you still want to use $.ajax you can try this (untested code):

activate() {
  return $.ajax({
    url: "servicecall",
    context: document.body
  }).then(() => {
    this.dbaName = "DATA ADMIN";
  });
}

Aurelia oneTime binding Behaviour

1 Answers