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.
var vm = canViewModel(element);
var vm2 = canViewModel("#element2id");
var vm3 = canViewModel($([element3]));
var 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");
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 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>
var canViewModel = require("can-view-model");
var element = document.querySelector("my-tabs");
var 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:
var canViewModel = require("can-view-model");
var element = document.querySelector("my-tabs");
var 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:
var domData = require("can-util/dom/data/data");
var DefineMap = require("can-define/map/map");
var element = document.querySelector("#my-id");
var myVm = new DefineMap();
domData.set.call(element, "viewModel", myVm);