Multiple ValueBinding Instance in Ember

Question

I have a controller like this,

    App.NewController = Ember.Controller.extend({
    // the initial value of the `search` property
    model: this.get('model'),
    start_date:new Date(),
    end_date: new Date()
});

My View template looks like this,

<div class="control-group">
  <label class="control-label" for="inputPassword">Event Start Date</label>
  <div class="controls">
    {{view App.DatePickerField  valueBinding='controller.start_date'}}

  </div>
</div>

<div class="control-group">
  <label class="control-label" for="inputPassword">Event End Date</label>
  <div class="controls">
    {{view App.DatePickerField  valueBinding='controller.end_date'}}

  </div>
</div>

finally i have my datepicker view like this:

App.DatePickerField = Ember.View.extend({
    templateName: "Datepicker",
    didInsertElement: function () {
        var OnChangeDate, self;
        self = this;
        OnChangeDate = function (evt) {
            return self.set('value', evt.date.toString());
        };
        return $('.date').datetimepicker({
            language: 'en',
        }).on('changeDate', OnChangeDate);
    }
});

the problem now is that if i select my start date, controller.start_date updates at the same time, just as i want. But when i select the end date, both start_date and end_date gets updated,now the start_date has the same value of end_date. It's like the ValueBinding keeps both in sync. I'm fairly new to Ember. Could someone please help me, what i'm doing wrong here?

Kingpin2k Kingpin2k · Accepted Answer · 2013-12-12T04:43:47

This is hooking up to both pickers

   return $('.date').datetimepicker({
        language: 'en',
    }).on('changeDate', OnChangeDate);

you can scope it to this element using, this.$()

   return $(this.$('.date')).datetimepicker({
        language: 'en',
    }).on('changeDate', OnChangeDate);

Multiple ValueBinding Instance in Ember

1 Answers