can-view-model

module

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);

Parameters

element {HTMLElement}:
Any element in the DOM.

Returns

{can-map|can-define/map/map|Object}:

The ViewModel associated with this elelement.

`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}:
Any element in the DOM.
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}:
ANy element in the DOM.
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 it's 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);