Ember - observes vs. property clash

Question

I have the following props in my Controller

App.TeamController = Ember.ObjectController.extend(
  involvedProjectTeams: (->
    return @get("content.projectTeams").filter (projectTeam, index, enumerable) ->
      projectTeam.get("sdeScopingWeeks") isnt 0
  ).property("[email protected]")
  notInvolvedProjectTeams: (->
    return @get("content.projectTeams").filter (projectTeam, index, enumerable) ->
      return projectTeam.get("sdeScopingWeeks") is 0
  ).observes("[email protected]")
)

I then iterate over both involvedProjectTeams as well as notInvolvedProjectTeams in the underlying template. I am getting the following error:

Uncaught TypeError: Object function () {
      return this.get("content.projectTeams").filter(function(projectTeam, index, enumerable) {
        return projectTeam.get("sdeScopingWeeks") === 0;
      });
    } has no method 'addArrayObserver' 

Why does property() work as expected but observes throws an error?

Thanks!!

Answer 1

From Ember's guides

In a nutshell, computed properties let you declare functions as properties. You create one by defining a computed property as a function, which Ember will automatically call when you ask for the property. You can then use it the same way you would any normal, static property.

So if you want to access something in the template, it should be a property.

Observers will just return the function only, so that can't be accessed in the templates. This is the reason why you get an error while accessing notInvolvedProjectTeams, which is just a function not a property.

Define this also as a computed property, so that you can access them in the templates.

P.S: You can use, ember's reduceComputed to define these properties.