Knockoutjs – components
- 1. Knockoutjs – Components 2014/10/03 Howard
- 2. Registering components as a viewmodel/template pair The component name can be any nonempty string. It’s recommended, but not mandatory, to use lowercase dash-separated strings (such as your-component-name) so that the component name is valid to use as a custom element (such as <your-component-name>). viewModel is optional, and can take any of the viewModel formats described below. template is required, and can take any of the template formats described below.
- 3. Specifying a viewmodel A constructor function Knockout will invoke your constructor once for each instance of the component, producing a separate viewmodel object for each. Properties on the resulting object or its prototype chain (e.g., someProperty and doSomething in the example above) are available for binding in the component’s view.
- 4. Specifying a viewmodel A createViewModel factory function If you want to run any setup logic on the associated element before it is bound to the viewmodel, or use arbitrary logic to decide which viewmodel class to instantiate:
- 5. Specifying a viewmodel An AMD module whose value describes a viewmodel If you have an AMD loader (such as require.js) already in your page, then you can use it to fetch a viewmodel
- 6. Specifying a template An existing element ID For example, the following element: an be used as the template for a component by specifying its ID: You’re not limited to using <template> elements, but these are convenient (on browsers that support them) since they don’t get rendered on their own. Any other element type works too.
- 7. Specifying a template An existing element instance If you have a reference to a DOM element in your code, you can use it as a container for template markup:
- 8. Specifying a template A string of markup
- 9. Specifying a template An array of DOM nodes If you’re building configurations programmatically and you have an array of DOM nodes, you can use them as a component template: In this case, all the specified nodes (and their descendants) will be cloned and concatenated into each copy of the component that gets instantiated.
- 11. There are two ways to use the component binding: Shorthand syntax Full syntax name — the name of the component to inject. Again, this can be observable. params — an object that will be passed on to the component.
- 12. Component lifecycle 1. Your component loaders are asked to supply the viewmodel factory and template 2. The component template is cloned and injected into the container element 3. If the component has a viewmodel, it is instantiated 4. The viewmodel is bound to the view 5. The component is active 6. The component is torn down, and the viewmodel is disposed
- 13. Custom elements
- 14. Introduction Custom elements are a syntactical alternative to the component binding. <div data-bind='component: { name: "flight-deals", params: { from: "lhr", to: "sfo" } }'></div> <flight-deals params='from: "lhr", to: "sfo"'></flight-deals>
- 15. Controlling custom element tag names If you want to have different custom element tag names, you can override getComponentNameForNode to control this. For example