Why isn't this observer reacting to content change?


#1

I have a search results page, I am initially displaying 25 of 50 results. I am trying to make a button that loads more results by request

I set 25 results as the content, and 25 into “remaining”:

App.SearchResultsRoute = Em.Route.extend
  model: ->
    Em.$.getJSON(...)

  setupController: (controller, model) ->
    controller.set 'remaining', model[25..]
    controller.set 'content', model[0..24]

I have a moreResultsAvailable function I use in the template to display the button if there is more results available

if moreResultsAvailable
  button click='showMoreResults' Load More

When the button is clicked, I check if there is less than 30 in “remaining” so I can just display the rest of the results except when this button is pressed the moreResultsAvailable doesn’t notice the change in content.

Not working:

App.SearchResultsController = Em.ArrayController.extend
  moreResultsAvailable: ( ->
    @get('content').length < @get('remaining').length
  ).property('content')

  actions:
    showMoreResults: ->
      if @get('remaining').length < 30
        @addObjects @get('remaining').splice(0, @get('remaining').length)
      else
        @addObjects @get('remaining').splice(0, 25)

Working:

App.SearchResultsController = Em.ArrayController.extend
  moreResultsAvailable: ( ->
    @get('content').length < @get('remaining').length
  ).property('content')

  actions:
    showMoreResults: ->
      if @get('remaining').length < 30
        @addObjects @get('remaining').splice(0, @get('remaining').length)
        @propertyDidChange('content') # Manually saying property did change
      else
        @addObjects @get('remaining').splice(0, 25)

Question: Why wouldn’t moreResultsAvailable function notice the change in content, and update it accordingly (without the @propertyDidChange)?


#2

Content is an array so you need to observe either is length proprty('content.lenght') or use the @each selector which can be also used in order to observe one property of the array elements property('content@each') `property(‘content@each.watchProperty’).

Don’t remember right the syntax is “content DOT @each” or without the DOT.


#3

Don’t remember right the syntax is “content DOT @each” or without the DOT.

It’s object.@each.property (dot)