CODEWITHSUNDEEP
javascriptecmascript-6es6-promise
Ankita
Ankita

Reputation: 189

How to render a template after promise resolves?

I want to return a template to be rendered in parent after resolving the promise. I know that value can't be returned from promise. How can I render the template once the template data is received?

In the following example, ContentPane is the parent which lists all the template to be rendered. In Films, network call is made and accordingly template needs to be rendered.

ContentPane.prototype.getTemplate = function(){
    let template = `
        <div class="contentPane" id="contentPane">
        ${new Films().render()}
        </div>
    `;
    return template;
}


Films.prototype.render =  function(){
    var template =  this.getTemplate();
    template.then(function(val){
        return val;
    })
    //based on the value resolved by promise,
//appropriate template should be returned to parent
}

Films.prototype.getTemplate = async function(){
  //make network call
  //create template based on server response
}

Upvotes: 3

Views: 1056

Answers (3)

Amir Hosein Arman Taheri
Amir Hosein Arman Taheri

Reputation: 1

you can resolve your problem like this. it work for me:

<items ref="items" :all="all" @remove="removeItem" />

and ==>

this.$api.productCategories.delete(item.id , true)
  .then(res => { 
    this.all = this.all.filter(i => i.id !== item.id) this.$showSuccess(this.$t('productCategories.productCategoryRemoved'))
    this.$nextTick(() => {
      this.$refs.items.reinit()
    })
  })
  .catch(err => {
    this.$showError(this.$getLocaleErrorMessage(err, 'productCategories'))
  })

Upvotes: 0

Moslem Shahsavan
Moslem Shahsavan

Reputation: 1337

Try aync-await operation....

const ContentPane = function() {}
const Films = function () {}

ContentPane.prototype.getTemplate = async function(){
  let template = `
      <div class="contentPane" id="contentPane">
      ${await new Films().render()}
      </div>
  `;
  return template;
}
Films.prototype.render =  async function(){
  var value =  await this.getTemplate();
  return value;
}
Films.prototype.getTemplate = async function(){
   return new Promise((res, rej) => {
       setTimeout(() => {
           res('123');
        }, 1000);
    });
}
new ContentPane().getTemplate().then(template => {
  console.log(template);
});

Upvotes: 3

Terence Cheng
Terence Cheng

Reputation: 594

I write an example. ContentPane.prototype.getTemplate can return a promise, then you can get the template from then callback function. like this new ContentPane().getTemplate().then(template => { console.log(template); });

  const ContentPane = function() {}
  const Films = function () {}

  ContentPane.prototype.getTemplate = async function(){
    const filmsTemplate = await new Films().render();
    let template = `
        <div class="contentPane" id="contentPane">
        ${filmsTemplate}
        </div>
    `;
    return template;
  }


  Films.prototype.render =  function(){
    var template =  this.getTemplate();
    return template.then(function(val){
      return val;
    })
    //based on the value resolved by promise,
    //appropriate template should be returned to parent
  }

  Films.prototype.getTemplate = async function(){
    //make network call
    //create template based on server response
    return await new Promise((resolve) => {
      resolve('123')
    })
  }

  new ContentPane().getTemplate().then(template => {
    console.log(template);
  });

Upvotes: 0

Related Questions