<div class='container' style='padding: 20px 0;'>
  <h3>Пример 1</h3>
  <p>Привет <span data-bind='obj.name__text:value__class:bold'><span></p>
  <p>Значение: <span data-bind="obj.val__html:value__invisible:value > 100"></span></p>
  <hr>	
  <h3>Пример 2</h3>  
  <div data-bind="obj1__template:.product">
    <script type="text/html">
      <div class="product">
        <div>Название: <b>{{ value.name }}</b></div>
        <div>Стоимость: <i>{{ value.price | format(2) }}<i></div>                 </div>
   </script>
 </div>
 <hr>
 <h3>Пример 3</h3>     
 <div data-bind="arr__vbindarray">
   <script type="text/html">
     <div data-bind=".name__html b">Имя услуги: <b></b></div>
     <p data-bind=".description__html"></p>
     <span>----------</span>
   </script>
 </div>
 <hr>
 <h3>Пример 4</h3>        
 <div data-bind="obj3.val__.fadeout:value > 100__.fadein:value < 100">Анимация, скрытие элемента если значение будет больше 100 </div> 
 <img data-bind="obj4.url__.fadeout:!value__.fadein:value__src:value" style='width:400px'>
 <hr>
 <h3>Пример 5</h3>           
 <div data-bind="obj5__vbindarray">
   <script type="text/html">
     <div data-bind=".name__html b">Название: <b></b></div>
     <p>Цена: <span data-bind=".price__html__format:1"></span> руб.</p>
     <button data-bind="price__click:link_buy">Купить</button>
     <div>----------</div>
  </script>
</div>
<p>Стоимость товаров: <span data-bind='obj5_basket.bal__text:value__format:2'></span> руб., Кол-во: <span data-bind='obj5_basket.cnt__text:value'></span></p>
  <button data-bind="price__click:clear_buy">Очистить корзину</button>
</div>
.bold {font-weight: bold;}
.fadeout {
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -ms-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  opacity: 0;
}
.fadein {
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -ms-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  opacity: 1;
}
 var obj = {'name': '', 'val': 10};
 var arr = []; 
 var obj3 = {};
 var obj5 = [{'name': 'Продукт 1', 'price': 2.75}, {'name': 'Продукт 2', 'price': 3.76}];
 var obj5_basket = {'bal': 0, 'cnt': 0};
 //изменение 1
 setTimeout(()=>{
    SET('obj.name', 'мир!');
 }, 2000)
 //изменение 2
 setTimeout(()=>{
    SET('obj.name', 'мирный мир!');
    SET('obj.val',  50);
 }, 4000)
 //изменение 3
 setTimeout(()=>{
    obj.name = 'мирный миру мир!';
    obj.val = 70;
    UPDATE('obj');
 }, 6000)
 //изменение 4
 setTimeout(()=>{
    SET('obj.val',  120);
 }, 8000)
 //изменение 4
 setTimeout(()=>{
    SET('obj1',  {'name': 'Комбинезон', 'price': 181.1523});
 }, 10000)
 setTimeout(()=>{
    arr = [{'name': 'Автомойка', 'description': 'Самый лучший сервис - автомойка'},
           {'name': 'Автосервис', 'description': 'Самый лучший сервис - автосервис'},
          ];
   UPDATE('arr');
 }, 11000)
 setTimeout(()=>{
    SET('obj3.val',  120);
 }, 12000)

 setTimeout(()=>{
    SET('obj3.val',  50);
 }, 16000)

 setTimeout(()=>{
    SET('obj4.url',  'https://bufferwall.com/download/B20190831T000000158.jpg');
 }, 16000)

 function link_buy(element, event, value, path) {
    var index = $(element).data('index');
    obj5_basket.bal += obj5[index]['price'];
    obj5_basket.cnt += 1;
    UPDATE('obj5_basket');	
 }

 function clear_buy(element, event, value, path) { 
    SET('obj5_basket', {'bal': 0, 'cnt': 0});	
 }

 //отслеживаем изменения переменной obj.name
 WATCH('obj.name', function(path, value, type){
    console.log('path:', path);	
    console.log('value:', value);	
    console.log('type:', type);	
 })

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css

External JavaScript

  1. https://cdn.componentator.com/spa.min@18.js