Introduction
This chapter demonstrates about the Knockout.js Component Binding which injects a specified component into an element and following are the concepts are covered in this chapter.
- Components
Description
Components square measure an enormous approach of organizing the UI code for structuring an oversized application and promote code reusability.
The code below demonstrates the use of component binding as shown below.
[html]
<!DOCTYPE html>
<head>
<title>KnockoutJS Component binding</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js" type="text/javascript"></script>
</head>
<body>
<h4>Component binding without parameters</h4>
<div data-bind='component: "calculate-sum"'></div>
<h4>Component binding passing parameters</h4>
<div data-bind='component: {
name: "calculate-sum",
params: { number1: 2, number2: 3 }
}'></div>
<script>
ko.components.register('calculate-sum', {
viewModel: function(params) {
this.number1 = ko.observable(params && params.number1);
this.number2 = ko.observable(params && params.number2);
this.result = ko.computed(function(){
var sum = Number(this.number1()) + Number(this.number2());
if ( isNaN(sum) )
sum = 0;
return sum;
},this);
},
template: 'Enter Number One: <input data-bind="value: number1" /> <br> <br>'+
' Enter Number Two: <input data-bind="value: number2" /> <br> <br>'+
' Sum = <span data-bind="text: result" />'
});
ko.applyBindings();
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- It is genetic or nested from alternative element.
- For loading and configuration, it defines its own conventions or logic.
- It is packaged to recycle throughout the applying or project.
- Represents the entire sections of application or little controls/widgets.
- Loaded or preloaded on demand.
- The component-name may be any nonempty string.viewModel is optional, and might take any of the
- viewModel formats listed in next sections.
- the template is needed and might take any of the example formats listed in next sections.
- name Which can be the name of the part to be inserted? As mentioned earlier, this could be AN discernible.
- params Which can be AN object to be passed to part. largely this can be a key-value object as well as multiple parameters. this can be most of the days received by the builder of a ViewModel.
Key Points
- Component is genetic or nested from alternative element.
- Component is Loaded or preloaded on demand.
- The parameter value passed is discernible.