--- title: View Components category: Tutorials --- --- Part of the [Getting Started with Infusion Component Design Tutorial](GettingStartedWithInfusion.md) --- In most cases, you will likely be creating a component that will actually want to do something with your HTML page: process form input, update displays, etc. plain and `model` components don't provide any support for this: you'll need a **view component**. A view component provides support for a model and events (i.e. it is a model component as well as a view component). It also provides supports for interaction with the DOM. The most useful of these is the [DOM Binder](../DOMBinder.md). If your application has a user interface, you likely have a list of DOM elements you're interested in working with. A DOM Binder provides very easy, configurable access to these elements. ## Declaring a View Component To create a view component, you need to use the **viewComponent** grade. To do this: * specify a grade of `fluid.viewComponent`, and * include a `selectors` property in your defaults containing your component's model. ```javascript fluid.defaults("tutorials.viewBearingComponent", { gradeNames: "fluid.viewComponent", // ... selectors: { selector1: ".class1", selector2: ".class2" } }); ```
gradeNames
list.
Converts Canadian currency into other denominations.
Convert: CAD to
Result: 0
``` So far, the JavaScript to instantiate this component and specify these selectors looks like this: ```javascript fluid.defaults("tutorials.currencyConverter", { gradeNames: "fluid.viewComponent", selectors: { amount: ".tut-currencyConverter-amount", currency: ".tut-currencyConverter-currency-selecter", convertButton: ".tut-currencyConverter-convert-button", result: ".tut-currencyConverter-result" } }); ``` So far we have not added any behaviour to this skeleton view component - we'll orchestrate together all the model, event and view code we've seen so far together into a working component in our final section on [Renderer Components](RendererComponents.md). Next: [Renderer Components](RendererComponents.md)