Introduction to components

We hope you enjoyed learning about templates in the last chapter. Perhaps the best explanation of a component is a packaged template with an isolated ViewModel. Here is the syntax we would use to declare a like component on the page:

<div data-bind="component: "like"''"></div>

If you are passing no parameters through to the component, this is the correct syntax. If you wish to pass parameters through, you would use a JSON style structure as follows:

<div data-bind="component:
{name: 'like-widget',params:{ approve: like} }"></div>

This would allow us to pass named parameters through to our custom component. In this case, we are passing a parameter named approve. This would mean we had a bound viewModel variable by the name of like. Look at how this would be coded. Create a page called components.html using the _base.html file to speed things up as we have done in all our other chapters. In your script section, create the following ViewModel:

...