# Sharing a controller / template for different routes

**URL:** <https://discuss.emberjs.com/t/sharing-a-controller-template-for-different-routes/1152>\
**Category:** Design\
**Created:** [May 2, 2013, 9:35am UTC](https://discuss.emberjs.com/t/sharing-a-controller-template-for-different-routes/1152 "2013-05-02T09:35:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ddewaele](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ddewaele/32/14656_2.png) [@ddewaele](https://discuss.emberjs.com/u/ddewaele)\
**Post date:** [May 2, 2013, 9:35am UTC](https://discuss.emberjs.com/t/sharing-a-controller-template-for-different-routes/1152/1 "2013-05-02T09:35:24Z")

</div>

This question falls under the best practices / design category I guess…

I’ve posted it [on stackoverflow](http://stackoverflow.com/questions/16331690/emberjs-sharing-a-controller-template-for-different-routes) as well if somebody wants to take a stab at it.

I have a very simple CRUD application that allows for creating new objects as well as editing them.

The template used for adding a record and editing a record are almost identical.

They use the exact same form elements. The only difference is the title and the button below the form (that should either update or create a record)

In my implementation, I have

- 2 route definitions
- 2 route objects
- 2 controller objects
- 2 templates

I was wondering if

- I can’t promote re-use here
- if all of these objects are required.

What bothers me :

- I have 2 seperate templates for create and edit (while they are almost identical)
- I have 2 seperate controllers that do exactly the same thing.

I was hoping to solve this on the controller level. As a controller decorates a model, in my case 1 single controller object could wrap either a new record or an existing record. It could then expose a property (isNewObject) so that the template can decide if we are in the “new” or “edit” flow. The controller could have a single createOrUpdate method that works both in the `new` and in the `update` scenario.

##Routes

The currently implementation is using a new and an edit route for my resource.

```
this.resource("locations", function(){
  this.route("new", {path:"/new"});
  this.route("edit", {path: "/:location_id" });
});

```

### The new route

The `new route` is responsible for creating a new record and is called when the user navigates to the new record screen.

```
App.LocationsNewRoute = Ember.Route.extend({
  model: function() {
	return App.Location.createRecord();
  }
});

```

### The edit route

The `edit route` is responsible for editing an existing object when the user clicks the edit button in the overview screen. I haven’t extended the default edit route but instead I’m using the auto generated one.

## Controllers

The `new` and `edit` controllers are responsible for handling the action that occurs in the template (either saving or updating a record)

The only thing both controllers do is commit the transaction.

**Note:** I guess this is a candidate for re-use, but how can I use a single controller for driving 2 different routes / templates ?

```
App.LocationsNewController = Ember.ObjectController.extend({
  addItem: function(location) {
	location.transaction.commit();
	this.get("target").transitionTo("locations");
  }
});

App.LocationsEditController = Ember.ObjectController.extend({
  updateItem: function(location) {
	location.transaction.commit();
	this.get("target").transitionTo("locations");
  }
});

```

## Templates :

As you can see, the only code-reuse I have here is the partial (the model field binding). I still have 2 controllers (new and edit) and 2 templates.

The new templates sets the correct title / button and re-uses the form partial.

```
<script type="text/x-handlebars" data-template-name="locations/new" >
	<h1>New location</h1>
	{{partial "locationForm"}}
	<p><button {{action addItem this}}>Add record</button></p>
</script>

```

The edit templates sets the correct title / button and re-uses the form partial.

```
<script type="text/x-handlebars" data-template-name="locations/edit" >
	<h1>Edit location</h1>
	{{partial "locationForm"}}
	<p><button {{action updateItem this}}>Update record</button></p>
</script>

```

The partial

```
<script type="text/x-handlebars" data-template-name="_locationForm" >
  <form class="form-horizontal">
  <div class="control-group">
	<label class="control-label" for="latitude">Latitude</label>
	<div class="controls">
	  {{view Ember.TextField valueBinding="latitude"}}
	</div>
  </div>
  <div class="control-group">
	<label class="control-label" for="latitude">Longitude</label>
	<div class="controls">
	  {{view Ember.TextField valueBinding="longitude"}}
	</div>
  </div>
  <div class="control-group">
	<label class="control-label" for="accuracy">Accuracy</label>
	<div class="controls">
	  {{view Ember.TextField valueBinding="accuracy"}}
	</div>
  </div>
</form>
</script>

```

**Note:** I would expect that I can do something more intelligent here.

I would want my template to look this this : (getting the title from the controller, and have a single action that handles both the update and the create)

```
<script type="text/x-handlebars" data-template-name="locations" >
	<h1>{{title}}</h1>
	{{partial "locationForm"}}
	<p><button {{action createOrUpdateItem this}}>Add record</button></p>
</script>

```

##Question

Can I re-work this code to have more code-reuse, or is it a bad idea to attempt to do this with a single template and a single controller for both the “edit record” and “new record” flows. If so, how can this be done ? I’m missing the part where my 2 routes (create and edit) would re-use the same controller / template.

---

<div class="post-metadata">

**Author:** ![hyder](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/hyder/32/4053_2.png) [@hyder](https://discuss.emberjs.com/u/hyder)\
**Post date:** [May 2, 2013, 10:47am UTC](https://discuss.emberjs.com/t/sharing-a-controller-template-for-different-routes/1152/2 "2013-05-02T10:47:43Z")

</div>

Answer in your SO question. [ember.js - EmberJS - sharing a controller / template for different routes - Stack Overflow](http://stackoverflow.com/questions/16331690/emberjs-sharing-a-controller-template-for-different-routes/16336079#16336079)