fgdata/webgui/topics/Simulator/Properties.html

<style>
.pointer-icon {
	cursor: pointer;
}

.property-list {
	list-style-type: none;
	list-style-image: none;
	padding-left: 26px;
}

.property-name {
	width: 12em;
	display: inline-block;
}

.property-value {
  padding: 0 0.2em;
  min-width: 8em;
  display: inline-block;
  text-align: right;
}
</style>
<div class="ui-widget ui-widget-content ui-corner-all">
<div class="ui-widget-header">Property Tree</div>
<div data-bind="template: { name: 'propertytree-template', data: properties }"></div>
</div>
<script type="text/html" id="propertytree-template">
  <ul class="property-list" data-bind="foreach: $data">
    <li>
        <span class="ui-icon pointer-icon" style="display: inline-block;"
              data-bind="
                css: { 
                  'ui-icon-triangle-1-e': hasChildren, 
                  'ui-icon-triangle-1-se': isExpanded, 
                  'ui-icon-refresh': hasValue, 
                },
                attr: {
                  title: hasValue ? 'click to refresh' : 'click to expand/collapse',
                },
                click: toggle,
        "></span>
        <span class="property-name"
              data-bind="
                text: indexedName,
                css: { 
                  'pointer-icon': hasChildren, 
                },
                click: toggle,
              "></span>

        <span class="property-value ui-state-hover pointer-icon ui-corner-all" 
              data-bind="
                text: value, 
                visible: hasValue,
                click: valueEdit,
              "></span>

        <div data-bind="
               template: { 
                 name: 'propertytree-template',
                 data: children
               },
               visible: isExpanded
             "></div>
    </li>
  </ul>
</script>
<script type="text/html" id="inplace-editor-template">
  <input style="width: 8em" >
</script>