Create dynamic person profile with editable fields

by alnico

HTML

<!DOCTYPE html>
<!-- To run the current sample code in your own environment, copy this to an html page. -->

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script src="https://www.jsviews.com/download/jsviews.min.js"></script>
  <link href="https://www.jsviews.com/samples/samples.css" rel="stylesheet" />
  <link href="https://www.jsviews.com/samples/change-log.css" rel="stylesheet"/>
</head>
<body>

<div class="left">
  <button id="modify">Change leaf values</button><br/>
  <button id="changeObjects">New address and phones</button><br/>
  <button id="insert">Add phone</button>
  <div id="result"></div>
</div>

<div class="logBox">
  <label>Change Log:</label>
  <button class="clear">Clear</button>
  <div class="messages"></div>
</div>

<script id="personTmpl" type="text/x-jsrender">
  <table class="nowidth"><tbody>
    <tr><td>Name:</td><td><input data-link="name" /></td></tr>
    <tr><td>Last Name:</td><td><input data-link="name2" /></td></tr>
    <tr><td>Address2:</td><td><input data-link="address2^street" /></td></tr>
    <tr><td>Address:</td><td><input data-link="address^street" /></td></tr>
    <tr><td>Phones:</td><td>
      <table class="nowidth"><tbody>
        {^{for phones}}
          <tr><td>
            <input class="floatleft" data-link="number" />
            <span class="remove" style="margin:3px"></span>
          </td></tr>
        {{/for}}
      </tbody></table>
    </td></tr>
  </tbody></table>
</script>

<script>
var person = {
  name: "Pete",
  name2: "Smith",
  address2: {
    street: "The capital"
  },
  address: {
    street: "1st Ave"
  },
  phones: [{number: "111 111 1111"}, {number:"222 222 2222"}] 
};

$("#modify").on("click", function() {
  $.observable(person).setProperty({
    name: "Hermione",
    "address.street": "Main St"
  });
});

$("#changeObjects").on("click", function() {
  $.observable(person).setProperty({
    address: {street: "New Street"},
    phones: [{number:"123 123 1234"}]
 ...