Получить возврат функции класса в представлении aurelia

Question

[РЕДАКТИРОВАТЬ 1: уточнение моего http запроса]

Моя цель - сделать асинхронный вызов, чтобы преобразовать число в строку и отобразить его пользователю в браузере. Я использую aurelia-http-client, чтобы сделать звонок. Сначала я попытался использовать преобразователь значений, а затем прочитал, что с этими преобразователями ничего нельзя сделать асинхронно. Сейчас я пытаюсь использовать класс и функции, но, похоже, это тоже не работает. Вот что я поместил в мой файл *.ts (модель, вызывающая веб-сервис, дающий реальное название трека с использованием его позиции и ссылки на релиз):

interface ITrack {
    position: number;
    reference: number;
    realPosition: number
}

class Track implements ITrack {
  position: number;
  reference: number;
  realPosition: number;

  public getTitle() {
      console.log('Getting title');  
        return `This track is the ${this.realPosition} of ${this.reference}.`;

    let client = new HttpClient();
    var json_tmp;
    var realTitle = 'tmp';

    client.get('http://localhost:8800/webservice/' + this.reference)
      .then(data => {
        console.log('### START DATA');
        console.log(data.response);
        console.log('### END DATA');
        var json_tmp = JSON.parse(data.response);
        realTitle = json_tmp.tracklist[this.realPosition].title;
        console.log('### RESPONSE: ' + realTitle);
      })
      .then(function(res) {
        console.log('### we are sending: ' + realTitle);
        return(reponse);
      });

    }
}

И вот что я поставил в поле зрения:

<span class="position">${track.realPosition}</span>/<span class="reference">${track.reference}</span>
- <span class="content">${track.getTitle()}</span></p>

"RealPosition" и "reference" отображаются правильно, "getTitle()" не запускается, у меня ничего нет в консоли...

Я справляюсь с этим неправильно? Заранее спасибо!

Answer 1

Напишите метод активации внутри вашей viewmodel, которая ожидает обещание, затем вызовите метод getTitle внутри activ (). Тогда страница загрузится только после загрузки заголовка.

class Track implements ITrack {
    position: number;
    reference: number;
    realPosition: number;

    public activate(): Promise < void > {
        return getTitle();
    }

    public getTitle(): Promise < void > {
        console.log('Getting title');
        //here you can call the aurelia http method like this
        return httpClient.getTitle().then((data) {
            this.position = data.position;
            this.reference = data.reference;

        });

    }
}

Answer 2

Я не уверен, что толку от этого оператора возврата:

return `This track is the ${this.realPosition} of ${this.reference}.`;

все в функции после этого return не будет выполнено, включая:

let client = new HttpClient();

Как уже указывалось другими, лучшим решением является вызов асинхронного http-вызова в методе активации, точно так же, как предложено в примере Aurelia Skeleton по адресу https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-typescript/src/users.ts

После этого вам нужно только прочитать свойство из шаблона, не вызывая какой-либо метод