在ember.js中訪問其模型之外的計算屬性

Question

我有一個名爲users.js的模型及相關控制器和路由的模型應用。在我的usersController.js中，我有一個功能來計算系統中的用戶數量。然後，我可以在我的users模板中顯示此圖。但是，我想在我的index模板中顯示該數字，請問這是可能的嗎？我將如何去做 - 現在這個數字似乎沒有在我的users模型之外使用。

這裏是我的usersController-

App.UsersController = Ember.ArrayController.extend({ 
    sortProperties: ['name'], 
    sortAscending: true, 

numUsers: function() { 
     return this.get('model.length'); 
    }.property('model.[]') 

}); 

而我的HTML的

<script type = "text/x-handlebars" id = "index"> 
    <h2>Homepage</h2> 

//This is where I would like the figure to be 

    <h3>There are {{numUsers}} users </h3> 
    </script> 

<script type = "text/x-handlebars" id = "users"> 

<div class="col-md-2"> 
{{#link-to "users.create"}}<button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus"></button> {{/link-to}} 

//This works fine 

<div>Users: {{numUsers}}</div> 
</div> 
<div class="col-md-10"> 

    <ul class="list-group"> 
    {{#each user in controller}} 
    <li class="list-group-item"> 
    {{#link-to "user" user}} 
     {{user.name}} 
    {{/link-to}} 
    </li> 
{{/each}} 

</ul> 

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

Answer 1

您只需加載所有用戶在IndexRoute，像這樣：

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
    return this.store.find('user'); 
    } 
}); 

並提取共享邏輯，在這種情況下，用戶計數，混合，並在需要時使用：

App.UsersCountMixin = Ember.Mixin.create({ 
    numUsers: function() { 
    return this.get('model.length'); 
    }.property('model.[]') 
}); 

App.IndexController = Ember.ArrayController.extend(App.UsersCountMixin, { 
}); 

App.UsersController = Ember.ArrayController.extend(App.UsersCountMixin, { 
    sortProperties: ['name'], 
    sortAscending: true 
}); 

因此{{numUsers}}將在您的index模板中有效。

要使用多個模型共享的邏輯，你將需要創建一些別名model財產避免歧義：

App.IndexRoute = Ember.Route.extend({ 
    model: function() { 
    return Ember.RSVP.hash({ 
     users: this.store.find('user'), 
     subjects: this.store.find('subject'), 
    }) 
    } 
}); 

App.UsersCountMixin = Ember.Mixin.create({ 
    users: Ember.required(), 
    numUsers: function() { 
    return this.get('users.length'); 
    }.property('users.[]') 
}); 

App.SubjectsCountMixin = Ember.Mixin.create({ 
    subjects: Ember.required(), 
    numSubjects: function() { 
    return this.get('subjects.length'); 
    }.property('subjects.[]') 
}); 

App.UsersController = Ember.ArrayController.extend(App.UsersCountMixin, { 
    users: Ember.computed.alias('model'), 
    sortProperties: ['name'], 
    sortAscending: true 
}); 

App.SubjectsController = Ember.ArrayController.extend(App.SubjectsCountMixin, { 
    subjects: Ember.computed.alias('model'), 
    sortProperties: ['name'], 
    sortAscending: true 
}); 

App.IndexController = Ember.ArrayController.extend(App.UsersCountMixin, App.SubjectsCountMixin, {}); 

當然，這是一個很大的代碼，只顯示數據長度，因爲你可以使用：

<h3>There are {{users.length}} users </h3> 
<h3>There are {{subjects.length}} subjecst </h3> 

但我想你會有更復雜的計算屬性分享。在這種情況下，mixin是實現它的好方法。