Working with promises after they are resolved

CanJS
1

hi guys,

i am always run into this problem.

i received data from a webserver. i uses can.Model. since promises are observable i used them many times to show the user a loading message. After the promise is resolved the list will be displayed.

i made a example: http://jsbin.com/xofuxegoki/edit?html,js,output

The problem is that after the promise is resolved an input element is displayed as well. the user should add items to the list. but the list is not a list it’s still a promise.

how can i add items to the list that is displayed?

Thanks

2

Here’s two ways of doing it:

way 1 - add after a .then

addMeal: function(meal){
    // with promise, this dont work
    this.attr('myList').then(function(list){
      list.push({
        id: 3, name: meal
      });
    })

  }

way 2 - async getters

Make myList and async getter that derives its value from the promise. If you do this, make sure myList is bound
before using it (the best way is to use it in the template).

  myList: {
      get: function(lastSet, resolve){
        this.attr("myListPromise").then(resolve);
      }
  }
1 Like