在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跨有着共同的逻辑控制器，型号等。

希望它有帮助。