GitHub
Twittercan-view-model
Gets the ViewModel of an element.
canViewModel(element)
Gets the map instance associated with element, creating one as a DefaultMap if it doesn’t already exist, and returns the map.
const vm = canViewModel( element );
const vm2 = canViewModel( "#element2id" );
const vm3 = canViewModel( $( [ element3 ] ) );
const vm4 = canViewModel( document.querySelectorAll( ".element4class" ) );
Parameters
- element
{HTMLElement|String|ArrayLike}:Any element in the DOM, represented by a reference to the element itself, a query selector string, or an Array-like holding the element in its zero index.
canViewModel(element, property)
Gets the map instance associated with element, creating one as a DefaultMap if it doesn’t already exist. Then, gets the property inside of the ViewModel and returns that.
var foo = canViewModel(element, "foo");
console.log(foo); // -> "bar"
Parameters
- element
{HTMLElement|String|ArrayLike}:Any element in the DOM, represented by a reference to the element itself, a query selector string, or an Array-like holding the element in its zero index.
- property
{String}:The property to get from the ViewModel.
Returns
{*}:
The value of the property on the ViewModel or undefined if the property doesn’t exist.
canViewModel(element, property, value)
Gets the map instance associated with element, creating one as a DefaultMap if it doesn’t already exist. Sets the property on that map to value.
canViewModel( element, "foo", "bar" );
const foo = canViewModel( element, "foo" );
console.log( foo ); // -> "bar"
Parameters
- element
{HTMLElement|String|ArrayLike}:Any element in the DOM, represented by a reference to the element itself, a query selector string, or an Array-like holding the element in its zero index.
- property
{String}:The property that is being set on the ViewModel.
- value
{*}:The value being set on the property.
Returns
{HTMLElement}:
The element.
Use
can-view-model is used to get and set properties on an element’s ViewModel. Each element in the DOM can have an associated ViewModel. An example of this is a can-component and its associated ViewModel.
This shows a Component and getting its ViewModel:
<my-tabs>
...
</my-tabs>
import canViewModel from "can-view-model";
const element = document.querySelector( "my-tabs" );
const vm = canViewModel( element );
The other signatures provide the ability to get and set properties on the ViewModel. For example, this sets the foo property on a component’s viewModel:
import canViewModel from "can-view-model";
const element = document.querySelector( "my-tabs" );
const vm = canViewModel( element );
canViewModel( element, "foo", "bar" );
console.log( vm.foo, "bar" );
Setting an element’s ViewModel
One thing that can-view-model does not do is provide a way to set what an element’s ViewModel should be. To do that, use data instead like so:
import domData from "can-util/dom/data/data";
import DefineMap from "can-define/map/map";
const element = document.querySelector( "#my-id" );
const myVm = new DefineMap();
domData.set.call( element, "viewModel", myVm );