Ember multiple property changes but want to trigger single event

Question

I have a ArrayController for date picker with properties to and from. Now when user selects a new date range from the UI both to and from value changes.

So a function which observers on to and from is trigger twice for a single change in date range.

I want to trigger the function only one every date range change. Any suggestions how to do that with ember

    app = Ember.Application.create();

    app.Time = Ember.ArrayController.create({

        to: null,
        from: null,
        rootElement: "#time",

        debug1: function() {
            this.set('to', 1);
            this.set('from', 2);
        },

        debug2: function() {
            this.setProperties( {
                'to': 3,
                'from': 4
            });
        },

        debug3: function() {
            this.beginPropertyChanges();
            this.set('to', 5);
            this.set('from', 6);
            this.endPropertyChanges();
        },

        search: function() {
            alert('called');
        }.observes('to', 'from')
    });

View in JS Fiddle

Answer 1

Perhaps you can introduce a computed property on from and to, and then plug the observer on this property. As CPs are cached by default, I think the observer will be triggered only once.

date: function(){
 // return the computed date
}.property('from', 'to')

dateDidChange: function(){

}.observes('date')

EDIT Thanks to your fiddle, it seems to work using setProperties, or begin/end propertyChanges http://jsfiddle.net/Sly7/zf2q3/1/

Answer 2

You can wrap observer in a Em.run.once

_dateDidChange: function(){
  Ember.run.once(this, 'dateDidChange');
}.observes('from', 'to'),

dateDidChange: function() {
  // should be called only once
}