在Ember.js合併（DRY）類似的控制器/模型/模板

Question

我是Ember.js的新手。我有兩組模型/控制器/模板處理非常相似的數據，我知道他們需要重構爲一個。儘管數據非常相似，但我仍然需要在輸出到模板時按「業務」或「第一類」類型進行不同的解釋。模板將上述類型分爲「活動」或「非活動」選項卡。我只是不確定什麼是「正確」的灰燼方式會這樣做。

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

第一/ inactive.handlebars

<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概念。但我確定還有其他人有類似的問題。什麼是正確的餘燼方式來重新考慮這一點？如果您注意到這些違規行爲，請在我的示例中指出其他任何違規行爲。謝謝！

Answer 1

您是否通過創建一個其他控制器可以從其中擴展的基本控制器來減少重複代碼？

這可能看起來像：

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

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

App.BusinessController = App.BaseController.extend(); 

App.FirstController = App.BaseController.extend(); 

至於你可以做類似的事情的車型，例如：

App.Base = DS.Model.extend({ 
    listingId  : DS.attr('string'), 
    location : DS.attr('string'), 
    occupied : DS.attr('string'), 
}); 

App.Business = App.Base.extend(); 

App.First = App.Base.extend(); 

最後一點，你也可以考慮使用Mixins跨有着共同的邏輯控制器，型號等。

希望它有幫助。