JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.90/jsviews.min.js"></script>
<script id="SettingsTemplate" type="text/x-jsrender">
  <div>
    <ul class="nodes-list">
      <li>
        <div>Node Alias</div>
      </li>
      {^{for settings.nodes^list}}
      <li>
        <div>
          <input name="alias[]" type="text" data-link="{:alias:} disabled{:!_new}" />
        </div>
        <button data-link="{on ~removeArrayItem}">remove</button>
      </li>
      {{/for}}
      <li>
        <button data-link="{on ~addNode settings}">add</button>
      </li>
    </ul>
  </div>
</script>

<div id="toolbar">
  <button data-link="{on ~refresh}">
refresh
</button>
</div>

<div id="SettingsForm">
</div>

JavaScript

var settings = {
  nodes: {
    list: [
      //{ alias: 'alias' },
    ],
  },
};
var freshSettings = JSON.stringify(settings);


$.templates('SettingsTemplate', '#SettingsTemplate');

$.link(true, '#toolbar', {}, {
  refresh: function() {
    $.observable(settings).setProperty(JSON.parse(freshSettings));
  },
});

$.link.SettingsTemplate('#SettingsForm', {
  settings: settings
}, {
  addNode: function addNode(settings) {
    $.observable(settings.nodes.list).insert({
      _new: true,
      alias: '',
    });
  },
  // special remove method
  removeArrayItem: function removeArrayItem(ev) {
    var view = $.view(ev.target);
    $.observable(view.parent.data).remove(view.index);
  }
});