EmberJS - compartilhando um controlador / modelo para diferentes rotas

Eu tenho um aplicativo CRUD muito simples que permite criar novos objetos, bem como editá-los.

O modelo usado para adicionar um registro e editar um registro é quase idêntico.

Eles usam exatamente os mesmos elementos de formulário. A única diferença é o título e o botão abaixo do formulário (que deve atualizar ou criar um registro)

Na minha implementação, tenho

2 definições de rota2 objetos de rota2 objetos controlados2 modelos

fiquei me perguntando se

Não posso promover a reutilização aquise todos esses objetos forem necessários.

O que me incomoda

Eu tenho dois modelos separados para criar e editar (enquanto eles são quase idênticos)Eu tenho 2 controladores separados que fazem exatamente a mesma coisa.

Eu estava esperando resolver isso no nível do controlador. Como um controlador decora um modelo, no meu caso, 1 objeto de controlador único poderia envolver um novo registro ou um registro existente. Pode então expor uma propriedade (isNewObject) para que o modelo possa decidir se estamos no fluxo "novo" ou "editar". O controlador pode ter um único método createOrUpdate que funcione nonew E noupdate cenário.

Rotas

A implementação atual está usando uma rota nova e de edição para o meu recurso.

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

onew route é responsável por criar um novo registro e é chamado quando o usuário navega para a nova tela de registro.

App.LocationsNewRoute = Ember.Route.extend({
  model: function() {
    return App.Location.createRecord();
  }
});
A rota de edição

oedit route é responsável por editar um objeto existente quando o usuário clica no botão de edição na tela de visão geral. Não estendi a rota de edição padrão, mas estou usando a rota gerada automaticamente.

Controladores

onew eedit controladores são responsáveis ​​por manipular a ação que ocorre no modelo (salvando ou atualizando um registro)

A única coisa que os dois controladores fazem é comprometer a transação.

Nota: Eu acho que isso é um candidato para reutilização, mas como posso usar um único controlador para dirigir 2 rotas / modelos diferentes?

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");
  }
});
Modelos :

Como você pode ver, a única reutilização de código que tenho aqui é a parcial (a ligação de campo do modelo). Eu ainda tenho 2 controladores (novo e editar) e 2 modelos.

Os novos modelos definem o título / botão correto e reutilizam o formulário parcial.

<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>

Os modelos de edição definem o título / botão correto e reutilizam o formulário parcial.

<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>

O parcial

<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>

Nota: Eu esperaria poder fazer algo eficiente / mais inteligente aqui.

Eu gostaria que meu modelo visse isso: (obtendo o título do controlador e tendo uma única ação que lida com a atualização e a criação)

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

Posso retrabalhar esse código para ter mais reutilização de código, ou é uma má ideia tentar fazer isso com um único modelo e um único controlador para os fluxos de "editar registro" e "novo registro". Se sim, como isso pode ser feito? Eu estou perdendo a parte onde minhas 2 rotas (criar e editar) reutilizariam o mesmo controlador / modelo.

questionAnswers(2)

yourAnswerToTheQuestion