Javascript 在ember.js中访问模型之外的计算属性
我有一个ember应用程序,它的模型名为Javascript 在ember.js中访问模型之外的计算属性,javascript,ember.js,Javascript,Ember.js,我有一个ember应用程序,它的模型名为users.js,带有相关的控制器和路由。在我的userscoontroller.js中,我有一个计算系统中用户数量的函数。然后,我可以在我的users模板中显示此图。但是,我想在我的索引模板中显示该图,这可能吗?我该怎么做呢?目前,在我的用户模型之外,这个数字似乎无法使用 这是我的用户控制器- App.UsersController = Ember.ArrayController.extend({ sortProperties: ['name'],
users.js
,带有相关的控制器和路由。在我的userscoontroller.js
中,我有一个计算系统中用户数量的函数。然后,我可以在我的users
模板中显示此图。但是,我想在我的索引
模板中显示该图,这可能吗?我该怎么做呢?目前,在我的用户
模型之外,这个数字似乎无法使用
这是我的用户控制器-
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>
主页
//这就是我想要的数字
有{{numuers}}个用户
{{{#链接到“users.create”}{{{/link到}}
//这个很好用
用户:{{numUsers}}
{{#控制器中的每个用户}
-
{{{#链接到“用户”用户}
{{user.name}
{{/链接到}
{{/每个}}
{{outlet}}
您可以在索引路由中加载所有用户,如下所示:
App.IndexRoute = Ember.Route.extend({
model: function() {
return this.store.find('user');
}
});
并将共享逻辑(在这种情况下为用户计数)提取到mixin,并在需要时使用:
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}}
将在您的索引
模板中可用
要与多个模型共享逻辑,您需要为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>
有{{users.length}}个用户
有{{subjects.length}}subjectst
但我认为您将有更复杂的计算属性共享。在这种情况下,mixin是一个很好的实现方法。太棒了,谢谢-如果我想为不止一个模型做这个,比如说对一些主题,IndexRoute和IndexController会是什么样子?