CODEWITHSUNDEEP
javascriptselectbindingember.js
Robin
Robin

Reputation: 21894

Ember, observers trigger in a strange order

Here's my controller EventTimezoneController. Its content property is set to an Event model.

App.ChallengeTimezoneController = Ember.ObjectController.extend
    timezones: [{value: "", label: ""}, {...}]

    timezoneDidChange: (->
        console.log "In controller", @get("timezone")
    ).observes("timezone") # I also tried "content.timezone"

And now my Event model:

App.Event = App.Challenge = DS.Model.extend(Ember.Validations,
    timezone: DS.attr('string')

    timezoneDidChange: (->
        console.log "In model", @get("timezone")
    ).observes("timezone")
)

And then, I have a TimezoneSelect view

App.TimezoneSelect = Ember.Select.extend
  valueBinding: "controller.timezone"
  contentBinding: "controller.timezones"
  optionValuePath: "content.value",
  optionLabelPath: "content.label"

Now here's the problem: when I select a new value in the select dropdown, the log shows:

> In controller American Samoa
> In model American Samoa

Why is the method timezoneDidChange from the controller called before the one in the model, since from what I understand, it's observing a property of the model?

Upvotes: 3

Views: 213

Answers (1)

intuitivepixel
intuitivepixel

Reputation: 23322

In ember.js, controllers are meant to proxy model, so it makes sense to call the computed properties function on the controller first. For reference you can check out this very informative talk from Luke Melia at Ember.js NYC especially at min 31:30 where a slide is shown with the concept.

hope it helps

Upvotes: 1

Related Questions