JSFiddle - React, Tailwind, and code Playground

by Zireael

HTML

<script src="https://rawgit.com/mikeric/rivets/master/dist/rivets.bundled.min.js"></script>
<div id="rvapp">

  <input class="input-main" type="text" name="" rv-value="rvLabels.id.0.color">
  <span>{{rvLabels.id.0.color}}</span>

  <hr>
  <div>
    <colorized rv-data="rvLabels.id" colorx="color" />
  </div>

</div>

CSS

input {
  display: block;
  margin-bottom: 0.2em;
  padding: 0.1em;
}

.input-main {
  background-color: LightBlue;
}

JavaScript

const obj_Labels = {
  id: [{
    "text": "AAA",
    "color": "red",
    "sth": "qwe"
  }, {
    "text": "HHH",
    "color": "green",
    "sth": "zxc"
  }, {
    "text": "KKK",
    "color": "blue",
    "sth": "jkl"
  }]

}



function testComponentViewModelCol(obj) {
  const self = this;
  self.data = obj;
}

rivets.components['colorized'] = {
  //attributes: ['colorx'],
  template: function(el, data) {
    return '<input rv-value="data.colorx">';
  },
  initialize: function(el, data) {
    return new testComponentViewModelCol(data, el);
  }
  //() => new Object()
};



rivets.configure({
  preloadData: true,
  templateDelimiters: ['{{', '}}']
})

const rivetBinding = rivets.bind(rvapp, {
  ['rvLabels']: obj_Labels
})