Emberjs Catch-22 - parent计算的属性有很多相关的对象
Emberjs Catch-22 - parent computed properties that count hasMany related objects
让我们从一个常见的场景开始:在一个模型上有一个computed属性:
模型/coney.js
bunniesTotal: Ember.computed.alias('babyBunnies.length')
假设应用程序的入口点是显示所有Coneys
的索引页:
routes/coneys/index
API返回所有的Coneys
,但它是分页的,所以每页只有50个出现(很好,我们不想要太多的兔子跑来跑去,不是吗?)
每只康尼(父母)都有它所有的孩子(因为它们只有几个,而且它们只是小兔子)。小载荷!)
因此,bunniesTotal
将始终是准确的,您可以在coneys/index
页面的列表中的每个Coney
上看到它。很好,很好,这是一个在Ember教程中随处可见的常见例子。安贝善良。
更多烬的善良-在用户访问/coneys/new.js
并添加新的Coney
和一些BabyBunnies
之后,当用户回到/coneyes/index
时,用户将自动看到上面的bunniesTotal
更新,因为新的宝宝兔在烬商店 Warren中。沃特沃斯,加油!
现在让我们旅行到未来并扩展我们的数据 warren。哦哦。
现在康尼夫妇有成千上万的孩子,也许还有成千上万的孙子孙女(是的,兔子,想想看!)
现在,在coneys/index
页面上,在第一次点击时为所有50个coney加载所有的babybunny是没有意义的。不好。
所以让我们修改API,并删除BabyBunnies
,以便每个Coney
必须单独请求它们(例如。当你去coneys/edit
,例如)。
但是…你怎么处理这个计数?现在客户端不知道每个父节点可能有多少个子节点。
你可以在API中而不是在Ember中为每个父类包含一个属性。所以现在你计算服务器上的孩子,并将总数发送给Ember。也许是meta.children_total
或只是模型上的属性。好吧,酷。
但是现在当用户在客户端添加子节点时,总数不会自动更新。你已经失去了余烬的善良,你的索引页现在已经"退化"在用户的眼中。
用户,在添加一个新的'子'并被重定向到coneys/index
后,将不会看到总更新。他们会觉得不对劲。我刚刚创建的新小兔子孩子发生了什么?
那么,在这篇时间旅行的小文章之后,问题来了。
烬有办法解决这个第22条军规吗?
添加子元素后可能会刷新父元素的背景。或者只是请求父元素的元数据,或者其他烬魔法?
我看了一下ds-references,以及关于这个特性的讨论,但都没有帮助我看到这个问题的建议解决方案是什么。
在ds-references链接中有这样的语句:
检索服务器提供的关于记录或关系的元数据
和下面的代码:
var meta = post.hasMany('comments').meta();
console.log(`${commentIds.length} comments out of ${meta.total}`);
因此,这意味着答案是对服务器提供的babybunny(儿童)有一个元总数。meta.total
将是所有子节点的总和。
但这又引出了两个问题:
当用户添加一个新的婴儿并将其保存到商店/沃伦和因此服务器,烬如何得到新的总数?它有什么作用吗?背景魔法只找回总吗?我怀疑不是,而且我必须手动请求babybunny端点才能获得
如果这个meta total实际上不是一个'raw' total,而是这个呢:
meta.totalFemaleBabyBunnies
meta.totalMaleBabyBunnies
我不明白Ember如何在不触发BabyBunnies端点刷新的情况下更新这样的总数(这意味着每次添加一个新婴儿时都要这样做!)
你有这个问题吗?如果有,你是怎么解决的?
我解决了这个问题,方法是将雄性/雌性小兔子的总数直接添加到父类的活动记录序列化器(即。所以它们是父模型上Ember中的属性)。不需要单独的meta总计,也不需要使用ds-references。
我只是想看看最简单和直接的解决方案是否会"奏效"。
所以现在当一个新婴儿被发布到API时,男性/女性计数会自动重新计算,并作为父有效负载的一部分发送回Ember。砰,计数更新的coney/索引页,就像这样!
妙不可言
我用1500个BabyBunnies
(使用Postgres)在我本地蹩脚的5年旧MacAir (Core i5 1.7GHz/4GB Ram)上测试了它。更新这两个计数只会增加大约1ms的页面加载时间。也就是眨眼的1/300:)
我永远不会有1500个BabyBunnies
,所以这个解决方案是非常合适的。
- 如何从对象的原型方法访问JavaScript对象属性
- 如何将数组项添加到对象属性中
- 设置嵌套对象属性的更好方法
- JavaScript管理具有重复属性名称的对象属性
- 如何使用element.myobj.prop等具有对象属性的元素
- 如何使用(this)访问Angular 2 http rxjs catch函数中的对象属性
- Es6:能够在设置/更新/删除对象属性时调用自定义方法
- 如何在AngularJS工厂中正确声明对象属性
- 如何使用object.assign()从其他对象引用基本对象属性
- 使用XPath样式访问Javascript JSON对象属性
- 将javascript对象(属性+值)合并到一个对象中
- 数组:使对象属性成为数组键
- 无法从JavaScript中的函数调用对象属性
- Google Closure Advanced |无法识别对象属性|动态属性
- Javascript从匿名函数访问外部对象属性
- 从函数更改对象属性
- 如何从字符串变量访问对象属性
- 从嵌套对象属性中获取排除某个值的最高值
- 在Aurelia computeds中,当设置依赖关系时,如何声明对对象属性的依赖关系
- 传递数量不确定的可能嵌套的对象属性