Комфортная разработка пользовательских интерфейсов

<div id="my-elem">...</div>
<script>
  var elem = document.getElementById('my-elem');
  myEngine.declareData('my-control', elem, {
    key: value
  });
</script>

<div data-control="my-control"
  data-key="value"
  data-key2="value2"
>...</div>

<div data-control="my-control"
  data-selected="true"
  data-count="10"
  data-url="http://example.com/"
>...</div>

• string
• number
• array

• boolean
• json
• target

define({
  handler: function() {...},
  properties: {
    selected: 'boolean',
    count: 'number',
    url: 'string'
  }
});

define({
  handler: function() {...},
  properties: {
    selected: ['boolean', false],
    count: ['number', 0],
    url: ['string', '']
  }
});

define({
  handler: function() {...},
  properties: {
    selected: { type: 'boolean', value: false, set: fn... },
    count: { type: 'number', get: fn..., set: fn... },
    url: { type: 'string', get: fn..., value: ''},
  }
});

define({
  handler: function() {
    ...
    this.get('url');
    this.get('selected');
    this.set('selected', false);
    this.get('time');
    this.get('number:time');
    ... }
  });

define({
  handler: function() {
    ...
    this.get('number:time');
    this.get('date:time');
    ...
  }
});

this.set('selected', true);

<div data-control="my-control"
  data-selected="true"
>...</div>

this.set('string:myVal', 'my-string');

<div data-control="my-control"
  data-my-val="my-string"
>...</div>

<style>
.my-control {
  background: red;
}

.my-control[data-toggle="1"] {
  background: blue;
}
</style>

<div data-control="toggle"
  data-toggle="0"
  class="my-control">
  Toggle me
</div>

var button = this.children.myButton;

<button data-control="button"
  data-name="my-button">...</button>

<div data-control="my-control"
  data-some-target="id-of-control" data-next-target=":next"
  data-other-next-target=":next:2"
></div>

define({
  handler: function() {...},
  properties: {...},
  base: ['button', 'a', '[role="button"]']
});

<div data-control="button">
  <div>
     <button>Click me!</button>
   </div>
</div>

<button data-control="button">Click me!</button>