如何更改模型中的属性时更新DOM元素?

时间:2017-02-09 03:29:15

标签: javascript ember.js

模型有一个名为database_password的属性,其中包含SVG rectsList元素列表(rect元素的arroy)。

所有rects都附加到rect生命周期钩子方法中的svg元素中(参见下面的代码),

didRender

期望行为:

didRender() { let $svg = this.$().find('svg'); this._clearSvg($svg); this._renderSelectedRects($svg); // append all rects in rectsList to svg }, _renderSelectedRects($svg) { const rects = this.get('image.rectsList'); rects.forEach((rect) => { $svg.append(rect); }); } 发生变化时,rectsList内的recent会自动更新。

问题:

根据svg的当前状态,在DOM上重新呈现所有rect的最佳位置在哪里。

我尝试使用rectsList记录当前模型的状态,但当didUpdateAttrs更改时,方法不会被触发。

我正在考虑使用 observer ,但我无法访问回调函数中的DOM元素。

1 个答案:

答案 0 :(得分:1)

使用观察员,您可以在不使用观察者或需要任何额外工作的情况下基于rectList渲染rects。

我提供twiddle两种方法。请看一下。