如何在ember.js中将把手变量绑定到Promise

Question

In Ember.js I am trying to bind a handlebars conditional the outcome of a ember-data fetch that returns a promise.

I understand that the promise has a success call back, but I don't understand how to bind the result of that success to the value of the computed property. The value of the computed property always seems to be true because it returns the promise.

{{#if game.moreThanOnePlayer}}
  <span> it was true </span>
{{/if}}


App.Game = DS.Model.extend
  players: DS.hasMany 'App.Player'
  moreThanOnePlayer: (->

    promise = @get('players') #triggers ajax call that returns a promise

    promise.then(
    (players) -> #promise success call back
      return players.length > 1 #this is what I want the computed property value to be
    )

    #but the return value of the function is still a promise, which always evaluates to true.
    return promise
  ).property('players')

ember-data version: // Last commit: ef11bff (2013-08-26 20:54:06 -0700)

Answer 1

You should load the data in the Route and make moreThanOnePlayer a computed property.

See http://jsbin.com/AJUWOJi/1/edit for an example.

Answer 2

I just managed to solve a very similar problem by wrapping part of the code in an Ember.run.once(...) block. I split the property I used in handlebars and the code that watches for changes. In your case I would try something like:

App.Game = DS.Model.extend
  players: DS.hasMany 'App.Player'
  moreThenOnePlayer: DS.attr 'boolean'
  playersUpdated: (->
    promise = @get('players')
    g = @
    promise.then(
      (players) ->
        Ember.run.once ->
          g.set 'moreThenOnePlayer', players.length > 1
    )
  ).observes('players')