Ember : 挂钩 css 属性 变化
Ember : Hook for css property change
我必须将大量 div 渲染到 DOM。所以,我所做的是首先将前 5 个元素渲染到 DOM 中,然后我以 300 毫秒的间隔周期渲染每 10 个 div。
问题是当我更改为 display: block
时,我需要更改组件中的某些内容。所以,我尝试为此使用 didRender
钩子。
代码如下
didRender() {
if(this.element.offsetParent) {
this.set('myvar', true);
}
}
但它并不完美。任何人请建议我这是最好的方法。
_提前致谢。
很难从问题中猜出您的用例,但我认为它是关于在不引起性能问题的情况下呈现非常大的项目列表。 ember 生态系统为此提供了防弹插件。我知道最成熟的是 ember-collection
and ember-large-list
。如果它们符合您的要求,我建议使用其中之一。重新实现类似的东西将需要大量工作。在超时的基础上呈现新项目不会很好地扩展,因为它没有考虑浏览器的工作负载。
对于您的具体问题:Ember 不提供监听 CSS 变化的方法。您应该在更改触发 CSS 更改的 属性 的同一位置执行自定义逻辑。如果render后一定要运行,需要处理Ember的runloop.
我必须将大量 div 渲染到 DOM。所以,我所做的是首先将前 5 个元素渲染到 DOM 中,然后我以 300 毫秒的间隔周期渲染每 10 个 div。
问题是当我更改为 display: block
时,我需要更改组件中的某些内容。所以,我尝试为此使用 didRender
钩子。
代码如下
didRender() {
if(this.element.offsetParent) {
this.set('myvar', true);
}
}
但它并不完美。任何人请建议我这是最好的方法。
_提前致谢。
很难从问题中猜出您的用例,但我认为它是关于在不引起性能问题的情况下呈现非常大的项目列表。 ember 生态系统为此提供了防弹插件。我知道最成熟的是 ember-collection
and ember-large-list
。如果它们符合您的要求,我建议使用其中之一。重新实现类似的东西将需要大量工作。在超时的基础上呈现新项目不会很好地扩展,因为它没有考虑浏览器的工作负载。
对于您的具体问题:Ember 不提供监听 CSS 变化的方法。您应该在更改触发 CSS 更改的 属性 的同一位置执行自定义逻辑。如果render后一定要运行,需要处理Ember的runloop.