model - Ember.js で同様のコントローラー/モデル/テンプレートを統合 (DRY) する

Question

Ember.js は初めてです。非常によく似たデータを処理するモデル/コントローラー/テンプレートのセットが 2 つあり、それらを 1 つにリファクタリングする必要があることはわかっています。データは非常に似ていますが、テンプレートに出力するときに、「Business」または「First」タイプごとに異なる解釈を行う必要があります。テンプレートは、上記のタイプを「アクティブ」または「非アクティブ」タブに分割します。それを行うための「正しい」残り火の方法が何であるかはわかりません。

私のroutes.js

this.resource('manage', function() {
    this.resource('business', function() {
        this.route('active');
        this.route('inactive');
    });
    this.resource('first', function() {
        this.route('active');
        this.route('inactive');
    });

App.FirstRoute = Ember.Route.extend({
    model: function(){
        return App.First.find();
    },
});

App.BusinessRoute = Ember.Route.extend({
    model: function(){
        return App.Business.find();
    },
});

私の RESTAdapter (store.js):

App.Store = DS.Store.extend({
revision: 12,
adapter: DS.RESTAdapter.reopen({
  buildURL: function(record, suffix) {

      var modelUrlMapping = {}
      modelUrlMapping["first"] = "api/v002/manage.json?me=first"
      modelUrlMapping["business"] = "api/v002/manage.json?me=business"

      var url = ""
      if(modelUrlMapping[record] != undefined ){
        requestUrl = modelUrlMapping[record]
      }
      else{
        requestUrl = this._super(record, suffix);
      }
      return requestUrl;

    }
})

});

モデル:

App.First = DS.Model.extend({
    listingId     : DS.attr('string'),
    location    : DS.attr('string'),
    occupied    : DS.attr('string'),
... (define some computed properties specific to First)

App.Business = DS.Model.extend({
    listingId     : DS.attr('string'),
    location    : DS.attr('string'),
    occupied    : DS.attr('string'),
... (define some computed properties specific to Business)

コントローラー:

App.ManageController = Ember.ObjectController.extend({
    content: [],
    needs: "application",
    applicationBinding: "controllers.application"
});

App.FirstController = Ember.ArrayController.extend({
    needs: "application",
    applicationBinding: "controllers.application",
    content: [],
    firstInactive: (function() {
    return this.get('content').filterProperty('showLabel') ;
    }).property('content.@each.showLabel'),

    firstActive: (function() {
            return this.get('content').filterProperty('showDuration');
    }).property('content.@each.showDuration'),
});

App.FirstActiveController = Ember.ArrayController.extend({
    needs: "first",
    firstBinding: "controllers.first",
});


App.FirstInactiveController = Ember.ArrayController.extend({
    needs: "first",
    firstBinding: "controllers.first",
});

App.BusinessController = Ember.ArrayController.extend({
    needs: "application",
    applicationBinding: "controllers.application",
    content: [],
    businessInactive: (function() {
    return this.get('content').filterProperty('showLabel') ;
    }).property('content.@each.showLabel'),

    businessActive: (function() {
            return this.get('content').filterProperty('showDuration');
    }).property('content.@each.showDuration'),
});

App.BusinessActiveController = Ember.ArrayController.extend({
    needs: "business",
    businessBinding: "controllers.business",
});


App.BusinessInactiveController = Ember.ArrayController.extend({
    needs: "business",
    businessBinding: "controllers.business",
});

テンプレート (「ファースト」のみ、「ビジネス」はほぼ同じ)

first.handlebars (タブ見出し):

<div id="content" class="span6">
    <h3 id="page_type" label="first" class="profile_heading">First</h3>
            <ul id="active_inactive_menu" class="nav nav-tabs">
                {{#linkTo 'first.active' tagName='li' href="#"}}<a>Active</a>{{/linkTo}}
                {{#linkTo 'first.inactive' tagName='li' href="#"}}<a>Inactive</a>{{/linkTo}}
            </ul>
        <div class="tab-content">

        {{outlet}}
    </div>          
</div>

最初/active.handlebars

<div class="tab-pane active" id="active_list">  
{{#if_not_empty first.firstActive}}
    <ul class="nav nav-tabs nav-stacked">

    {{#each listing in first.firstActive}}
        {{render listingLine listing }}
    {{/each}}   
    </ul>
{{else}}
    No listing found.
{{/if_not_empty}}
</div>

最初/非アクティブ.ハンドルバー

<div class="tab-pane" id="inactive_list">
{{#if_not_empty first.firstInactive}}
    <ul class="nav nav-tabs nav-stacked">
    {{#each listing in first.firstInactive}}
        {{render listingLine listing }}
    {{/each}}
    </ul>
{{else}}
    No listing found.
{{/if_not_empty}}
</div>

多くのコードを作成しましたが、これらが Ember.js の非常に基本的な概念であることがわかりました。しかし、私は同様の質問を持つ他の人がいると確信しています. これをリファクタリングする正しい残り火の方法は何ですか? 私の例でその他の重大なベスト プラクティス違反に気付いた場合は、指摘してください。ありがとう！