如何在模型内的属性更改时更新DOM元素？

模型具有名为rectsList的属性，其中包含SVG rect元素的列表（rect元素的列表）。如何在模型内的属性更改时更新DOM元素？

所有rects被追加到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会自动更新。

问题：

哪里是重新渲染基于的rectsList当前状态的DOM所有rect是最好的地方。

我试图使用didUpdateAttrs登录当前模型的状态，但是当rectsList更改方法没有被触发。

我想使用观察者但我没有访问回调函数内的DOM元素。

来源

2017-02-09 Xinyang Li

在观察者案例中，为什么您无法访问DOM？你可以在任何地方访问DOM –

我以为我只能通过'this访问'didRender'和'didInsertElement'中的圆顶。$（）' –

不，您可以访问到处的DOM –

您可以基于rectList渲染rects，而无需使用观察者或使用观察者的任何额外工作。

我提供了两种方法的twiddle。请看看它。

来源

2017-02-09 08:38:31

在SVG中使用每个循环都是一个很好的方法。谢谢 –

如何在模型内的属性更改时更新DOM元素？

回答

相关问题