search

BorisMoore / jsviews

Interactive data-driven views, MVVM and MVP, built on top of JsRender templates
http://www.jsviews.com/#jsviews
MIT License
856 stars 130 forks source link

broken top-level data-linking with v0.9.84 and datatables #369

Closed trueqbit closed 7 years ago

trueqbit commented 7 years ago

Hi Boris,

I have a page with table, which is constructed with the datatables plugin. For each row I am additionally making a toolbar in a specific cell. The toolbar for each row is a clone of an existing element on the page serving as a template. After cloning the new toolbar element gets added to the cell's DOM and top-level data-linked with jsviews.

With jsviews 0.9.83 click handlers passed as helpers worked, but not anymore with jsviews 0.9.84, see fiddle https://jsfiddle.net/pieceofcode/9yjg6pLo/

For comparison I tried data-linking an inline template (as opposed to cloning and top-level linking): https://jsfiddle.net/pieceofcode/3ahk20u2/. This approach doesn't work at all (neither with 0.9.83 nor with 0.9.84). Which makes me believe you fixed something I was using incorrectly?

BorisMoore commented 7 years ago

Hi Klaus,

Thanks for calling this out, and creating the jsfiddles.

It was tricky to debug. What is happening is that after you have inserted or data-linked cell content in the createdCell callback, DataTable.js is then creating a cloned table including those same data-linked elements - and is then removing the elements within the cloned table - but not the original data-linked elements that were copied. Because the cloning is copying over the element attributes and expando properties (including those added by JsViews as annotations to manage data-linking), JsViews is cleaning up and disposing views and event bindings as it would do if you removed the original elements from the DOM. It does not realize these are duplicated elements, and that the annotations don't actually apply and should be ignored.

So here is a candidate update which is smarter about detecting this scenario, and not disposing inappropriately. Can you test it in your environment, and let me know if it works correctly...?

jsviews.zip

Boris

trueqbit commented 7 years ago

Glad you took your time and found the issue!

The 0.9.85 candidate works both when data-linking top-level elements and those created from templates.

Looking forward to 0.9.85 :)

BorisMoore commented 7 years ago

This fix is included in commit 85.