CODEWITHSUNDEEP
ember.jscoffeescriptember-data
DVG
DVG

Reputation: 17480

Ember bind controller property to query in another controller

So I have a requirement that there should be a panel displaying a users unsubmitted widgets. Since it has to be in every view, I made into a component that accepts a binding to a count of unsubmitted widgets:

# components/unsubmitted-widgets.emblem
.well.text-center
    a href="#" My Widgets (#{unsubmittedWidgetsCount})
    button.small-button type="button" click="submitWidgets"
      strong Submit Widgets

I was thinking that the query for the widgets API would go into the application controller, which all other controllers can bind to

App.ApplicationController = Ember.Controller.extend
  unsubmittedWidgets: (->
    @store.find('unsubmittedWidget', user: @get('currentUser'))
  ).property()

App.HomeController = Ember.Controller.extend
  needs: ["application"]
  unsubmittedWidgetCount: (->
    @get('controllers.application.unsubmittedWidgets').toArray().length
  ).property('controllers.application.unsubmittedWidgets')

So this fires off the request and I get a result. However the view doesn't get updated automatically. The view shows My Widgets() on whatever screen I'm on, and when I transition to another route where the view is present, I get the real value, but when I go back to the original page it's still not displaying everything.

How would I actually go about appropriately binding the value on the page to the length of the returned record set?

Upvotes: 0

Views: 102

Answers (1)

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

When you create a property that has a collection as dependency, you must use @each, like so: 

App.HeroesController = Ember.Controller.extend({
  identities: [
    Em.Object.create({ mask: 'Captain America', name: 'Steve Rogers', isAvenger: true }),
    Em.Object.create({ mask: 'Iron Man', name: 'Tony Stark', isAvenger: true }),
    Em.Object.create({ mask: 'Batman', name: 'Bruce Wayne', isAvenger: false }),
  ],
  justiceLeague: function() {
    var identities = this.get('identities');
    return identities.filterBy('isAvenger', false).get('length');
  }.property('[email protected]'),
  avengers: function() {
    var identities = this.get('identities');
    return identities.filterBy('isAvenger', true).get('length');
  }.property('[email protected]')
});

The @each will run your computed property code to get the count of items that match whenever one or more objects in the identities array gets the isAvenger property updated. For this example, it should show a count of two characters, considering one out of the 3 items has the filtered property set to false. The other list, watches the exact same path, but the "formula" is different, outputting the count of 1 character for the example above.

Upvotes: 2

Related Questions