31

新しいオブジェクトの作成と編集を可能にする非常に単純な CRUD アプリケーションがあります。

レコードの追加とレコードの編集に使用されるテンプレートはほとんど同じです。

まったく同じフォーム要素を使用しています。唯一の違いは、タイトルとフォームの下のボタンです (レコードを更新または作成する必要があります)。

私の実装では、私は持っています

  • 2 つのルート定義
  • 2 つのルート オブジェクト
  • 2 つのコントローラー オブジェクト
  • 2 つのテンプレート

私は疑問に思っていた

  • ここで再利用を促進することはできません
  • これらのオブジェクトがすべて必要な場合。

気になること：

  • 作成と編集用に 2 つの別々のテンプレートがあります (ほとんど同じですが)。
  • まったく同じことを行う2つの別々のコントローラーがあります。

これをコントローラーレベルで解決したいと思っていました。コントローラーがモデルを装飾するので、私の場合、1 つのコントローラー オブジェクトが新しいレコードまたは既存のレコードのいずれかをラップできます。次に、プロパティ (isNewObject) を公開して、テンプレートが「新規」フローか「編集」フローかを判断できるようにします。newコントローラーには、シナリオ内とシナリオ内の両方で機能する単一の createOrUpdate メソッドを含めることができupdateます。

ルート

現在の実装では、リソースの新しい編集ルートを使用しています。

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

新しいルート

はnew route新しいレコードの作成を担当し、ユーザーが新しいレコード画面に移動したときに呼び出されます。

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

編集ルート

はedit route、ユーザーが概要画面で編集ボタンをクリックしたときに、既存のオブジェクトを編集する役割を果たします。デフォルトの編集ルートは拡張していませんが、代わりに自動生成ルートを使用しています。

コントローラー

newおよびeditコントローラーは、テンプレートで発生するアクション (レコードの保存または更新) の処理を​​担当します。

両方のコントローラーが行う唯一のことは、トランザクションをコミットすることです。

注:これは再利用の候補だと思いますが、1 つのコントローラーを使用して 2 つの異なるルート/テンプレートを運転するにはどうすればよいですか?

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

テンプレート:

ご覧のとおり、ここでコードを再利用するのは部分的なもの (モデル フィールド バインディング) だけです。まだ 2 つのコントローラー (新規および編集) と 2 つのテンプレートがあります。

新しいテンプレートは正しいタイトル/ボタンを設定し、フォームのパーシャルを再利用します。

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

編集テンプレートは正しいタイトル/ボタンを設定し、フォームのパーシャルを再利用します。

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

パーシャル

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

注:ここでは、効率的でスマートなことができると期待しています。

テンプレートを次のようにしたいと思います:(コントローラーからタイトルを取得し、更新と作成の両方を処理する単一のアクションを持ちます)

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

質問

このコードを作り直してコードの再利用を増やすことはできますか、それとも「レコードの編集」フローと「新しいレコード」フローの両方に対して単一のテンプレートと単一のコントローラーでこれを行うのは悪い考えですか? もしそうなら、どうすればこれを行うことができますか? 2 つのルート (作成と編集) が同じコントローラー/テンプレートを再利用する部分がありません。

4

2 に答える 2

2

これを使って：

App.YourNewRoute = Em.Route.extend ({
   controllerName: 'controllerName',
   templateName: 'templateName'
 });

homeController ユーザー "home" のような初期名のみを使用してください。

例：

App.YourNewRoute =  Em.Route.extend ({
   controllerName: 'home',
   templateName: 'home'
});

これで、「home」のテンプレート メソッドとコントローラー メソッドを使用できるようになりました。

于 2015-08-07T13:14:53.080 に答える