Ember.js:如何表示一个有多个模型的关系
Ember.js: How to represent a has-many model relationship?
我正在尝试设置一个ember应用程序,其中我有许多项,所有项都有许多选项。然后我需要一个"仪表板"区域,在那里我可以监视所有项目/选项的信息。
在上一篇文章中,我得到了一个仪表板的工作示例,该仪表板监视单个项目集合
如何更新以表示每个项目的子选项
Javascript-来自jsBin(更新)
App = Ember.Application.create();
/* ROUTES */
App.Router.map(function() {
this.resource('items');
this.resource('dashboard');
});
App.IndexRoute = Ember.Route.extend({
redirect: function() {
this.transitionTo('items');
}
});
App.ItemsRoute = Ember.Route.extend({
model: function() {
var a = Em.A();
a.pushObject( App.Items.create({title: 'A', cost: '100'}));
a.pushObject( App.Items.create({title: 'B', cost: '200'}));
a.pushObject( App.Items.create({title: 'C', cost: '300'}));
return a;
}
});
/* MODELS */
App.Items = Ember.Object.extend({
title: '',
cost: '',
quantity: ''
});
/* CONTROLLERS */
App.ItemsController = Ember.ArrayController.extend({
legend: 'test',
len: function(){
return this.get('length');
}.property('length'),
totalCost: function() {
return this.reduce( function(prevCost, cost){
return parseInt(cost.get('cost'),10) + (prevCost || 0);
});
}.property('@each.cost')
});
App.DashboardController = Em.Controller.extend({
needs: ['items'],
itemsLength: Ember.computed.alias('controllers.items.len'),
itemsTotalCost: Ember.computed.alias('controllers.items.totalCost')
});
把手
<script type="text/x-handlebars" data-template-name="application">
<p><strong>Ember.js example</strong><br>Using an a dashboard that monitors 'items'.</p>
{{render dashboard}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="items">
<h2>Items:</h2>
<dl>
{{#each}}
<dt>Title: {{title}}</dt>
<dd>Cost: {{cost}} {{input value=cost}}</dd>
{{/each}}
</dl>
</script>
<script type="text/x-handlebars" data-template-name="dashboard">
<h2>Overview:</h2>
{{#if controllers.items}}
<p>Total number of items (expect 3): {{itemsLength}}<br>
Total cost of items (expect 600): {{itemsTotalCost}}</p>
{{/if}}
</script>
在前面,我建议使用客户端记录管理框架,如ember数据/ember模型,它们有点像学习曲线,但从长远来看非常棒。如果你不想这样做,你可以按照你已经建立的模式创建模型。
http://jsbin.com/IpEfOwA/3/edit
相关文章:
- 当一个模型在骨干关系中被销毁时,销毁相关模型的最佳方法是什么?
- LoopBack访问另一个模型
- 与设计用户相关联的多个模型-根据角色选择填写一个模型
- Backbone.js视图可以有一个模型和一个集合吗
- Backbone Collection.每个方法都会影响每隔一个模型
- 如何使用angularjs在一个模型中实现多个模板
- 在 Backbone 中将数据从一个模型传递到另一个模型
- 默认情况下,一个模型属性等于 sail.js 模型中的另一个模型属性
- Ember.js:一个模型如何观察其他模型
- 主干:如何在视图中将一个模型替换为另一个模型
- 访问 Ember.js 中的另一个模型数据
- BackboneJS:集合初始化在视图模块中只有一个模型
- 将主干模型属性值设置为另一个模型
- AngularJS请求模型在另一个模型创建[NodeJS]之前
- AngularJS:如果ng模型被另一个模型填充,如何让它受到影响
- 如果一个模型在续集中引用自身,如何让所有孩子或父母在多对多关联中
- 创建一个模型REST API
- 在另一个模型中引用/填充猫鼬模型时出现问题
- 我应该如何创建一个作用域到另一个模型的主干集合
- 当模型依赖于另一个模型时创建模型