simplyedit
simplyedit copied to clipboard
SimplyEdit
Databinding gets disconnected when data-simply-entry is used with deeper objects
Here is a reproduction script for the issue:
<!doctype html>
<html>
<head>
</head>
<body>
<div data-simply-list="things" data-simply-entry="entry">
<template>
<div data-simply-field="entry" data-simply-content="template" data-simply-transformer="thingType" data-simply-default-value="de
fault">
<template data-simply-template="default"></template>
<template data-simply-template="thing">
<div class="ds-form-group ds-grid">
<label>Thing type:
<select data-simply-field="entry.thing">
<option value="">Select a thing</option>
<option value="001-001">Thing 1</option>
<option value="002-002">Thing 2</option>
<option value="003-003">Thing 3</option>
<option value="004-004">Thing 4</option>
</select>
</label>
</div>
</template>
</template>
</div>
<script src="/simply-edit/js/simply-edit.js" data-api-key="codepen"></script>
<p>thing array</p>
<pre id="thing"></pre>
<script>
editor.transformers = {
thingType: {
render: function (data) {
this.simplyData = data;
return Object.keys(data)[0];
},
extract: function (data) {
return this.simplyData;
}
}
};
document.addEventListener("simply-content-loaded", function () {
editor.pageData.things = [
{ "thing": "001-001" },
{ "thing": "001-001" }
];
});
setInterval(() => {
const pre = document.getElementById("thing")
pre.innerText = JSON.stringify(editor.pageData.things, null, 2)
}, 1000);
</script>
</body>
</html>
The observed behaviour is that when changing the value in the selectbox, the 'thing array' will get updated as expected. However, the entries in the array are updated incorrectly.
[
{
"thing": "001-001",
"entry": {
"thing": "003-003"
},
"_simplyConverted": true
},
{
"thing": "001-001",
"entry": {
"thing": "002-002"
},
"_simplyConverted": true
}
]
This should have been:
[
{
"thing": "003-003"
},
{
"thing": "001-001"
}
]
Codepen example as lead for this issue https://codepen.io/marchagen/pen/rNPExBp
