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

Question

A model has a property called rectsList which contains a list of SVG rect elements (an arroy of rect elements).

All the rects are append into an svg element in didRender lifecycle hook method (see code below),

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);
    });
}

The expect behaviour:

When the rectsList changes, the recent inside svg is automatically updated.

The question:

Where is the best place to re-render all the rect s on the DOM based on the current state of rectsList .

I have tried to log the state of the current model using didUpdateAttrs but when the rectsList changes the method is not get triggered.

I am thinking to use the observer but I do not have the access to the DOM element inside callback function.

Answer 1

You can render rects based on rectList without using observers or if any additional working needed, with using observers.

I provide a twiddle with both approaches. Please take a look at it.