Emberjs - I need an action that will change the value of a variable

Question

I have a variable/action called docTemplateID. docTemplateID can have a value of either 1 or 2 Clicking button 1 sets docTemplateID = 1. Clicking the Submit Button will create an instance of docTemplateID with it's new value

<form {{action "addDoc" on="submit"}} id="addDoc" name="addDoc">
  <div>
    <button value="1"> 1 </button> //sets docTemplateID to 1
    <button value="2"> 2 </button> //sets docTemplateID to 2
  </div>
  <button type="submit" class="submit"> Add</button> //Submits docTemplateID after it is chosen.
</form>

The button submits whatever button is selected.

VpcYeoman.Doc = DS.Model.extend({
  docTemplateID: DS.attr('number'), //this is what can be set to a value of 1 or 2
});

The 'addDoc' action is defined below.

VpcYeoman.DocsController = Ember.ArrayController.extend({  
  actions: {
    addDoc: function (params) {
      var docTemplateID = this.get('docTemplateID');
      var store = this.store;
      var current_object = this;
      var doc = current_object.store.createRecord('doc', {
        docTemplateID:docTemplateID 
      });
      doc.save();
      return true;
    },

  }
});

And the Docs Route

VpcYeoman.DocsRoute = Ember.Route.extend(VpcYeoman.Authenticated,{
    model: function() {
        return this.store.find('doc');
    }
});

Answer 1

Unless there is something in your route, which I cannot see, it looks like the problem is that , for one, you are not calling any action on the buttons that set the docId when they are clicked. Problem #2 is that your controller doesn't have a property called docTemplateId yet. In order for your controller to take on the properties of your model, you need to pass it an instance of that model. If you passed a createRecord as the model in your DocRoute, then the value would be modifiable.

Here is the code that I used to make your example work, at least up until saving the record since I do not have your backend.

The jsbin is located here

App = Ember.Application.create();

App.ApplicationAdatper = DS.FixtureAdapter.extend({});

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({

});

App.IndexController = Ember.ArrayController.extend({  
  tempDocId: null,
  actions: {
    addDoc: function (params) {
      console.log(this.get('tempDocId'));
      var docTemplateID = this.get('tempDocId');
      var store = this.store;
      var current_object = this;
      var doc = current_object.store.createRecord('doc', {
        docTemplateID:docTemplateID 
      });
      doc.save();
      return true;
    },
    setDocId: function (param) {
      this.set('tempDocId', param);
      console.log(this.get('tempDocId'))
    }
  }
});

App.Doc = DS.Model.extend({
  docTemplateID: DS.attr('number')
});

And the template:

<script type="text/x-handlebars" data-template-name="index">
    <form {{action "addDoc" on="submit"}} id="addDoc" name="addDoc">
      <div>
        <button value="1" {{action 'setDocId' 1}}> 1 </button> 
        <button value="2" {{action 'setDocId' 2}}> 2 </button>
      </div>
      <button type="submit" class="submit"> Add</button>
    </form>
</script>

I hope this helps!