<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>
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);
})