Dynamically setting the context of an Ember view

Question

Is it possible to change the context of an Ember view, specifically as regards the valueBinding? I have a matrix of text inputs with rows representing categories and columns representing days of the week. I don't want to save empty values or 0 values, but each input has some other data specific to it that needs to be saved if the user enters hours in that input. So, when generating the form, I create an array of objects, each of which is simply a javascript hash (if no existing entry exists for that field) or an ember-data record (if an entry already exists) and use each of these objects as the context for the view.

So, the idea is that if the user enters a zero or an empty string in a field with an existing value, that record is deleted and the context of the view is replaced with a simple hash that still contains the other relevant pieces of info for that field, in case the user comes back and sets that value again. Conversely, adding input to a field that was previously empty would create a new ember-data record using the values from the attached hash and the value of the input.

I've gotten as far as deleting existing records, which works, but the valueBinding for the text input remains bound to the record that's slated for deletion. I would like to change the context of the field to the placeholder hash immediately. If I commit the transaction and come back to that screen, the record has been deleted and the context is now a newly generated placeholder, but I would like to change the context of the TextField view (which I've extended) as soon as the value changes to zero/null. I've attempted using this.set('context') and this.set('valueBinding'), but neither work. Here's the code for my view so far. Can anyone help me out, or suggest a better alternative?

App.HourInputView = Ember.TextField.extend({
  type: 'number',
  init: function(){
    this._super() ;
    var context = this.get('context') ;
    var ph = moment(this.get('context.cal_date')).format("dd") ;
    this.set('placeholder',ph) ;
  },

  change: function(){
    var val = this.get('value') ;
    if (this.contextIsRecord() && (val===0 || val==='0' || val==='')) {
      var record = this.get('context') ;
      var new_ctx = this.get('context').getProperties('user','site','supervisor','category','cal_date') ;
      new_ctx.total = null;
      this.set('context',new_ctx) ;
      this.set('valueBinding',"new_ctx.total") ;
      record.deleteRecord() ;
    }
  },


  //--

  contextIsRecord: function() {
    var ctx = this.get('context') ;
    return (typeof ctx.deleteRecord === 'function') ;
  }
}) ;

Ben Ben · Accepted Answer · 2013-09-13T22:04:59

Holy cow, was I going about this one wrong. Walked away, had some lunch and came back and came up with a better solution. Instead of using a combo of actual Record objects and dummy hashes, I create a record object for each input and observe changes on each input. Any changes get added to a custom transaction. When the user clicks the save button, I commit the custom transaction and roll back the default transaction to get rid of all the irrelevant Record objects.

Dynamically setting the context of an Ember view

1 Answers