Data binding does not work on contenteditable="plaintext-only" #469
Description
On v1.0.15, data-binding a string to a div with contenteditable="plaintext-only" does not work.
When editing the first control in the example below, the changes propagate to the second control. However, when editing the second control, the changes do not propagate to the first control.
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="https://www.jsviews.com/download/jsviews.js"></script>
<style>
div[contenteditable] {
width: 400px;
height: 75px;
margin-bottom: 5px;
padding: 2px;
border: solid black 1px;
overflow: auto;
}
</style>
</head>
<body>
<div id="container"></div>
<script id="template" type="text/x-jsrender">
contenteditable="true"
<div contenteditable="true" data-link="text"></div>
contenteditable="plaintext-only"
<div contenteditable="plaintext-only" data-link="text"></div>
contenteditable="false"
<div contenteditable="false" data-link="text"></div>
<button data-link="{on toggleMode}">Change mode</button>
contenteditable="{^{>mode}}"
<div data-link="{:text:} contenteditable{:mode}"></div>
</script>
<script type="text/javascript">
var model = {
text: 'Lorem ipsum odor amet, consectetuer adipiscing elit.',
mode: 'true',
toggleMode: () => {
let newMode = "";
switch (model.mode) {
case "true":
newMode = "plaintext-only";
break;
case "plaintext-only":
newMode = "false";
break;
case "false":
newMode = "true";
break;
}
console.log("toggle", model, newMode);
$.observable(model).setProperty("mode", newMode);
console.log("toggle", model, model.mode);
}
};
$.templates('#template').link('#container', model);
</script>
</body>
</html>