OJET6: KnockoutJS Code
- KnockoutJS1_Introduction
- KnockoutJS2_1_Bindings_On_BasicComponents
- KnockoutJS2_BasicBinding_&_Observable_&_Subscribe
- KnockoutJS3_checkbox_button_select_radio
- KnockoutJS4_1_Apply_2_Bindings
- KnockoutJS4_2_data-bind_html
- KnockoutJS4_foreach_1.data-bind_&_ko foreach
- KnockoutJS5_Template_Create_&_Use
- KnockoutJS6_CustomComponen_uses_Template
###########################################################################
- KnockoutJS2_1_Bindings_On_BasicComponents
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Checkbox - <input type="checkbox" data-bind="checked: agreed">
Button - <button data-bind="enable:agreed">
Text - <input type="text" data-bind="value:newStudent, valueUpdate:'afterkeydown'"/>
Button - <button data-bind="click: addStudent, enable:newStudent().length > 0">
select - <select multiple data-bind="options:studentList, selectedOptions:selectedStd">
////////////////////////////////////////////////////////
ForEach - <p> & <table>
<p data-bind="foreach: studentList">>
<input name="std" type="radio" data-bind="value: $data, checked: $parent.choosenRadioStd"/>
</p>
<table data-bind="foreach:personList"
<td><span data-bind="text: $data.firstName">
<!-- ko foreach:personList -->
<span data-bind="text: $data.firstName"></span>
<!-- /ko -->
////////////////////////////////////////////////////////
Template
----------
1. Create template - <script type="text/html" id="personTeamplate">
2. use it using - <div data-bind="template:
data
foreach
////////////////////////////////////////////////////////
Component
----------
1. register component with - ViewModel and template
2. Use it using - data-bind="component:
with param
without param
direct tag
###########################################################################
- KnockoutJS2_BasicBinding_&_Observable_&_Subscribe
<!DOCTYPE html>
<head>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
type = "text/javascript"></script>
</head>
<body>
<!-- This is called "view" of HTML markup that defines the appearance of UI -->
<p>Enter your name: <input data-bind = "value: yourName" /></p>
<p>Hi <strong data-bind = "text: yourName"></strong> Good Morning!!!</p>
<p>Enter your age: <input type="text" data-bind="value: yourAge" /></p>
<p>Your age : <span data-bind="text: yourAge"></span></p>
<p>In 2020, your age is : <span data-bind = "text:newComputedAge"></span></p>
<div>Languages : <p data-bind="text : dataArray"></p></div>
<script>
// <!-- This is called "viewmodel". This javascript section defines the data and behavior of UI -->
function AppViewModel() {
///////////////////////////////////////////////////////////////////////////////
this.yourName = ko.observable(""); //marking our variable as Observable
this.yourName.subscribe(function(val){ //since our variable is Observable , now we can subscirbe on that
console.log("New Name:", val);
});
///////////////////////////////////////////////////////////////////////////////
//this.yourAge = 20;
this.yourAge = ko.observable(20); //marking our variable as Observable
this.yourAge.subscribe((val) =>{ //since our variable is Observable , now we can subscirbe on that
console.log("New Age:", val)
if(val > 100){
this.yourAge(20);
}
});
///////////////////////////////////////////////////////////////////////////////
//or i can give it inside above subscribe only, but this has to obserable to get it reflect in UI
this.newComputedAge = ko.computed(() => {
return parseInt(this.yourAge()) + 2;
});
//this.dataArray = ['C','C++','JAVA'];
this.dataArray = ko.observableArray(['C','C++','JAVA']);
}
vm = new AppViewModel();
// Activates knockout.js
ko.applyBindings(vm );
setTimeout(function(){vm.yourName("Abhijit")}, 2000);
setTimeout(function(){vm.dataArray.push('Javascript');}, 2000);
</script>
</body>
</html>
###########################################################################
- KnockoutJS3_checkbox_button_select_radio
<!DOCTYPE html>
<html>
<head>
<title>Knockout - Model Binding</title>
<script src = 'scripts/jquery-3.1.1.min.js'></script>
<script src = 'scripts/knockout-3.4.1.js'></script>
<script>
$(document).ready(function(){
function MyModel(){
this.agreed = ko.observable(false);
this.newStudent= ko.observable("");
this.studentList = ko.observableArray();
self = this;
this.addStudent = function(){
self.studentList.push(self.newStudent());
}
this.selectedStd = ko.observableArray();
this.removeStudent = function(){
selection = self.selectedStd();
for(i=0; i< selection.length ; i++){
self.studentList.remove(selection[i]);
}
}
this.choosenRadioStd = ko.observable();
}
ko.applyBindings(new MyModel());
})
</script>
</head>
<body>
<p>Here is License agreement text</p>
<!-- Checkbox Test -->
<p>Accept License <input type="checkbox" data-bind="checked: agreed"></p>
<p data-bind="text:agreed"></p>
<!-- Visible/Enable Test -->
<!-- <button data-bind="visible:agreed">Download</button> -->
<button data-bind="enable:agreed">Download</button>
<hr>
<div>Enter Student Name:
<input type="text" data-bind="value:newStudent, valueUpdate:'afterkeydown'"/>
<button data-bind="click: addStudent, enable:newStudent().length > 0">Add</button>
</div>
<p>Here are the student list :
<!-- <span data-bind="text: studentList"></span> -->
<select multiple data-bind="options:studentList, selectedOptions:selectedStd"></select>
Selected student :
<span data-bind="text:selectedStd"></span>
<button data-bind="enable:selectedStd().length > 0, click:removeStudent">Remove Item</button>
</p>
<hr>
<div>Choose any student:
<p data-bind="foreach: studentList">
<label data-bind="text:$data"></label>
<input name="std" type="radio" data-bind="value: $data, checked: $parent.choosenRadioStd"/>
</p>
<p>Choosen Radio student is : <span data-bind="text:choosenRadioStd"></span></p>
</div>
</body>
</html>
###########################################################################
- KnockoutJS4_1_Apply_2_Bindings
<!DOCTYPE html>
<html>
<head>
<title>Knockout - Model Binding</title>
<script src = 'scripts/jquery-3.1.1.min.js'></script>
<script src = 'scripts/knockout-3.4.1.js'></script>
<script>
$(document).ready(function(){
var firstRankHolder = {
firstName: ko.observable(),
lastName: ko.observable()
};
var secondRankHolder = {
fName: 'Sidney',
lName: 'Sheldon',
score: 1200,
address:'Bangalore'
};
var dummySecondRankHolder = {
firstName: secondRankHolder.fName,
lastName: secondRankHolder.lName,
fullName: secondRankHolder.fName + ' ' + secondRankHolder.lName
}
ko.applyBindings(firstRankHolder, document.getElementById('firstRankDiv'));
ko.applyBindings(dummySecondRankHolder, document.getElementById('secondRankDiv'));
})
</script>
</head>
<body>
<div id="firstRankDiv">
<h2>First Rank</h2>
First Name : <input type="text" data-bind="value:firstName, valueUpdate:'keypress'"><br/>
Second Name : <input type="text" data-bind="value:lastName"><br/>
Span First Name : <span data-bind="text:firstName"></span>
Span Last Name : <span data-bind="text:lastName"></span>
</div>
<div id="secondRankDiv">
<h2>Second Rank</h2>
First Name : <input type="text" data-bind="value:firstName"><br/>
Second Name : <input type="text" data-bind="value:lastName"> <br/>
Score : <input type="text" data-bind="value:fullName">
</div>
</body>
</html>
###########################################################################
- KnockoutJS4_2_data-bind_html
<!DOCTYPE html>
<html>
<head>
<title>Knockout - Bindings</title>
<script src = 'scripts/jquery-3.1.1.min.js'></script>
<script src = 'scripts/knockout-3.4.1.js'></script>
<script type="text/javascript">
$(document).ready(function(){
var viewModel = {
details: ko.observable()
};
viewModel.details("<em>For further details, view the report <a href='http://google.com'>here</a>.</em>");
ko.applyBindings(viewModel);
})
</script>
</head>
<body>
<div data-bind="text: details"></div>
<br>
<br>
<div data-bind="html: details"></div>
</body>
</html>
###########################################################################
- KnockoutJS4_foreach_1.data-bind_&_ko foreach
<!DOCTYPE html>
<html>
<head>
<title>Knockout - Model Binding</title>
<script src = 'scripts/jquery-3.1.1.min.js'></script>
<script src = 'scripts/knockout-3.4.1.js'></script>
<script>
$(document).ready(function(){
function MyModel(){
this.personList = [
{
firstName: "John",
lastName:"smith"
},
{
firstName: "Merry",
lastName:"Rose"
}
]
}
ko.applyBindings(new MyModel());
})
</script>
</head>
<body>
<p>Here is Student List</p>
<table data-bind="foreach:personList" border="1">
<th>
<td>FristName</td>
<td>LastName</span></td>
</th>
<tr>
<td><span data-bind="text: $data.firstName"></span></td>
<td><span data-bind="text: $data.lastName"></span></td>
</tr>
</table>
<p>List of People:
<br>
<!-- ko foreach:personList -->
<span data-bind="text: $data.firstName"></span>
<!-- /ko -->
</p>
</body>
</html>
###########################################################################
- KnockoutJS5_Template_Create_&_Use
<!DOCTYPE html>
<html>
<head>
<title>Knockout - Model Binding</title>
<script src = 'scripts/jquery-3.1.1.min.js'></script>
<script src = 'scripts/knockout-3.4.1.js'></script>
<script>
$(document).ready(function(){
function MyModel(){
this.personList = [
{
firstName: "John",
lastName:"smith",
mobile:1234
},
{
firstName: "Merry",
lastName:"Rose",
mobile:7890
}
]
}
ko.applyBindings(new MyModel());
})
</script>
</head>
<body>
<p>Template binding example</p>
<!-- Using Teamplate -->
<div>List of people:
<!-- <div data-bind="template: {name: 'personTeamplate', data:personList[0]}"></div> -->
<div data-bind="template: {name: 'personTeamplate', foreach:personList}"></div>
</div>
<!-- Create teamplate, since its a repetative DOM element -->
<script type="text/html" id="personTeamplate">
<h3>FirstName : <span data-bind="text:firstName"></span></h3>
<h4>LastName : <span data-bind="text:lastName"></span></h4>
<h4>Mobile : <em data-bind="text:mobile"></em></h4>
</script>
</body>
</html>
2nd example:
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating - Named Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<div data-bind = "template: { name: 'friend-template', data: friend1 }"></div>
<div data-bind = "template: { name: 'friend-template', data: friend2 }"></div>
<script type = "text/html" id = "friend-template">
<h3 data-bind = "text: name"></h3>
<p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
<p>Email-id: <span data-bind = "text: email"></span></p>
</script>
<script type = "text/javascript">
function MyViewModel() {
this.friend1 = {
name: 'Smith',
contactNumber: 4556750345,
email: 'smith123@gmail.com'
};
this.friend2 = {
name: 'Jack',
contactNumber: 6789358001,
email: 'jack123@yahoo.com'
};
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
###########################################################################
- KnockoutJS6_CustomComponen_uses_Template
<!DOCTYPE html>
<html>
<head>
<title>Knockout - Model Binding</title>
<script src = 'scripts/jquery-3.1.1.min.js'></script>
<script src = 'scripts/knockout-3.4.1.js'></script>
<script>
$(document).ready(function(){
//Create Our own component - http-error
ko.components.register('http-error',
{
viewModel:function(params){
this.message = params && params.msg || 'Unkown error';
this.httpCode = params && params.code || 505;
},
template: {element : 'httpTemplate'}
});
ko.applyBindings();
})
</script>
<!-- Create Template -->
<script type="text/html" id="httpTemplate">
<h2>Http Error: <p data-bind="text:message, style:{color: httpCode < 500 ? 'red' : 'cyan'}"></p></h2>
<h2>Http Code: <em data-bind='text:httpCode'></em></h2>
</script>
</head>
<body>
<p>Custom component</p>
<hr>
<!-- 1st Way : Consuming Component - http-error, with passing params-->
<div data-bind="component: {name: 'http-error', params: { msg: 'File not found', code: 404}}"></div>
<hr>
<!-- 2nd Way : Consuming Component - http-error , without sending params, so that default thing will display-->
<div data-bind="component: 'http-error'"></div>
<hr>
<!-- 3rd Way : Consuming Component -->
<http-error params="{msg: 'Server Error', code: 500}"></http-error>
</body>
</html>
###########################################################################
<!DOCTYPE html>
<head>
<title>KnockoutJS Templating - Named Template</title>
<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
type = "text/javascript"></script>
</head>
<body>
<h2>Friends List</h2>
Here are the Friends from your contact page:
<div data-bind = "template: { name: 'friend-template', data: friend1 }"></div>
<div data-bind = "template: { name: 'friend-template', data: friend2 }"></div>
<script type = "text/html" id = "friend-template">
<h3 data-bind = "text: name"></h3>
<p>Contact Number: <span data-bind = "text: contactNumber"></span></p>
<p>Email-id: <span data-bind = "text: email"></span></p>
</script>
<script type = "text/javascript">
function MyViewModel() {
this.friend1 = {
name: 'Smith',
contactNumber: 4556750345,
email: 'smith123@gmail.com'
};
this.friend2 = {
name: 'Jack',
contactNumber: 6789358001,
email: 'jack123@yahoo.com'
};
}
var vm = new MyViewModel();
ko.applyBindings(vm);
</script>
</body>
</html>
No comments:
Post a Comment