knockout-es5
Version:
Knockout.js meets ECMAScript 5 properties
91 lines (82 loc) • 2.79 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="node_modules/knockout/build/output/knockout-latest.debug.js"></script>
<script src="dist/knockout-es5.js"></script>
<title>Knockout-es5 experiments</title>
</head>
<body>
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName()"> </span>!</h2>
<input data-bind="value: nested.one" />
<input data-bind="value: nested.two" />
<div data-bind="foreach: nested.forth">
<input data-bind="value: $data" />
</div>
</body>
<script>
var ViewModel = function( first, last ) {
this.firstName = first;
this.lastName = last;
this.nested = {
one: 'one',
two: 'two',
three: {
three_one: {
three_one_one: 'asdfsadf',
three_one_two: '3452345dfgdfgf'
},
three_two: 'two'
},
forth: [
'a', 'b', 'c'
],
five: [
{a: 'a', b: {a:'a'}}
]
};
this.fullName = function() {
return this.firstName + ' ' + this.lastName;
};
//todo: add notation 'a b -c' - include a and b, exclude c
ko.track(this, {
//fields: []
//exclude: []
//filter: function( fieldName, fieldValue ){}
deep: true
});
};
//var vm = new ViewModel('Planet', 'Earth');
//ko.applyBindings( vm );
var obj = {
selected: {},
locale_days: {
mon: 'Понедельник',
tue: 'Вторник',
wed: 'Среда',
thu: 'Четверг',
fri: 'Пятница',
sat: 'Суббота',
sun: 'Воскресенье'
},
pages: [
{ identity: 'general', title: 'О заведении', isActive: false },
{ identity: 'photos', title: 'Фото и фотоотчеты', isActive: false },
{ identity: 'reviews', title: 'Отзывы', isActive: false },
{ identity: 'offers', title: 'Акции', isActive: false },
{ identity: 'menu', title: 'Меню', isActive: false },
{ identity: 'feeds', title: 'Бизнес-ланч', isActive: false },
{ identity: 'banquet', title: 'Банкеты', isActive: false }
],
activePage: 'general'
};
ko.track(obj, {
deep: true
});
console.log(obj);
console.log(ko.es5.getAllObservablesForObject(obj.pages));
</script>
<!--<script src="bundle.js"></script>-->
</html>