can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - can-view-model</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" type="text/css" href="./static/bundles/bit-docs-site/static.css"> <link rel="shortcut icon" sizes="16x16 24x24 32x32 48x48 64x64" href="/docs/images/canjs_favicon.ico"> <link rel="apple-touch-icon" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon-precomposed" sizes="57x57" href="../docs/images/canjs_favicon_57x57.png"> <link rel="apple-touch-icon" sizes="72x72" href="../docs/images/canjs_favicon_72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="../docs/images/canjs_favicon_114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="../docs/images/canjs_favicon_128x128.png"> <link rel="apple-touch-icon" sizes="144x144" href="../docs/images/canjs_favicon_144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="../docs/images/canjs_favicon_152x152.png"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-2302003-11', 'auto'); ga('send', 'pageview'); </script> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger"/> <label for="nav-trigger">Menu</label> <div id="everything"> <div id="left" class="column"> <div class="top-left"> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> <div class="dropdown project-dropdown"> <a href="https://donejs.com/">DoneJS</a> <a href="http://stealjs.com/">StealJS</a> <a href="http://jquerypp.com/">jQuery ++</a> <a href="https://funcunit.com/">FuncUnit</a> <a href="http://documentjs.com/">DocumentJS</a> </div> </div> <div class="version"> <div class="version-number"> 3.0.0 </div> <div class="dropdown version-dropdown"> <a href="https://v2.canjs.com">2.3.27</a> </div> </div> </div> <div class="search-bar"> <p>   </p> </div> </div> <div class="bottom-left"> <div class="social-side-container"> <ul class="social-side"> <li> <a class="header-mobile github" href="https://github.com/canjs/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/github.png">Github</a> </li> <li> <a class="header-mobile twitter" href="https://twitter.com/canjs" target="_blank"><img class="social-icon-small" src="../docs/images/twitter.png">Twitter</a> </li> </ul> <ul class="social-side"> <li> <a class="header-mobile" href="https://gitter.im/canjs/canjs" target="_blank">Chat</a> </li> <li> <a class="header-mobile" href="http://forums.donejs.com/c/canjs" target="_blank">Forum</a> </li> </ul> </div> <ul> <li class=" "> <a class="page" href="guides.html" title="Welcome to CanJS! These guides are here to help you develop and improve your relationship with CanJS. After all, picking a JavaScript framework is a commitment. We want CanJS to be the framework you marry. This page helps you know how advance through the different stages of this relationship:"> Guides </a> </li> <li class=" "> <a class="page" href="can-core.html" title="The best, most hardened and generally useful libraries in CanJS."> Core </a> </li> <li class=" "> <a class="page" href="can-ecosystem.html" title="Useful libraries that extend or add important features to the core collection."> Ecosystem </a> </li> <li class=" parent expanded"> <a class="page" href="can-infrastructure.html" title="Utility libraries that power the core and ecosystem collection."> Infrastructure </a> <ul> <li class=" "> <a class="module" href="can-construct.html" title="Provides a way to easily use the power of prototypal inheritance without worrying about hooking up all the particulars yourself. Use can-construct.extend to create an inheritable constructor function of your own."> can-construct </a> </li> <li class=" "> <a class="module" href="can-control.html" title="Create organized, memory-leak free, rapidly performing, stateful controls with declarative event binding. Use Control to create UI controls like tabs, grids, and context menus, and organize them into higher-order business rules with can.route. It can serve as both a traditional view and a traditional controller."> can-control </a> </li> <li class=" "> <a class="module" href="can-event.html" title="Add event functionality into your objects. The canEvent object provides a number of methods for handling events in objects. This functionality is best used by mixing the canEvent object into an object or prototype. However, event listeners can still be used even on objects that don't include canEvent. All methods provided by canEvent assume that they are mixed into an object -- this should be the object dispatching the events."> can-event </a> </li> <li class=" "> <a class="module" href="can-event/async/async.html" title="Makes the event system asynchronous. WARNING: This is experimental technology."> can-event/async/async </a> </li> <li class=" "> <a class="module" href="can-event/batch/batch.html" title="Adds task batching abilities to event dispatching."> can-event/batch/batch </a> </li> <li class=" "> <a class="module" href="can-observation.html" title="Provides a mechanism to notify when an observable has been read and a way to observe those reads called within a given function."> can-observation </a> </li> <li class=" "> <a class="module" href="can-simple-map.html" title="A performant live-bound map."> can-simple-map </a> </li> <li class=" "> <a class="page" href="can-util.html" title="A set of utilities."> can-util </a> </li> <li class=" "> <a class="module" href="can-view-callbacks.html" title="Registered callbacks for behaviors"> can-view-callbacks </a> </li> <li class=" "> <a class="module" href="can-view-live.html" title="Setup live-binding between the DOM and a compute manually."> can-view-live </a> </li> <li class="current parent expanded"> <a class="module" href="can-view-model.html" title="Gets the ViewModel of an element."> can-view-model </a> </li> <li class=" "> <a class="module" href="can-view-nodelist.html" title="Adds nesting of text nodes can.view.nodeLists are used to make sure "directly nested" live-binding sections update content correctly. Consider the following template: <div> {{#if items.length}} Items: {{#items}} <label></label> {{/items}} {{/if}} </div> The {{#if}} and {{#items}} seconds are "directly nested" because they share the same <div> parent element. If {{#items}} changes the DOM by adding more <labels>, {{#if}} needs to know about the <labels> to remove them if {{#if}} is re-rendered. {{#if}} would be re-rendered, for example, if all items were removed."> can-view-nodelist </a> </li> <li class=" "> <a class="module" href="can-view-parser.html" title="Parse HTML and mustache tokens."> can-view-parser </a> </li> <li class=" "> <a class="module" href="can-view-scope.html" title="Create a lookup node for keys."> can-view-scope </a> </li> <li class=" "> <a class="module" href="can-view-target.html" title=""> can-view-target </a> </li> </ul> </li> <li class=" "> <a class="page" href="can-legacy.html" title="Former libraries that we still accept patches for, but are not under active development."> Legacy </a> </li> </ul> </div> </div> <div id="right" class="column"> <div class="top-right"> <div class="top-right-top"> <ul class="top-right-bitovi"> <li class="dropdown"> <a href="http://bitovi.com" class="bitovi icon-bits">Bitovi</a> <ul class="dropdown-menu"> <li><a href="http://bitovi.com">Bitovi.com</a></li> <li><a href="http://bitovi.com/blog/">Blog</a></li> <li><a href="http://bitovi.com/consulting/">Consulting</a></li> <li><a href="http://bitovi.com/training/">Training</a></li> <li><a href="http://bitovi.com/open-source/">Open Source</a></li> </ul> </li> </ul> <div class="brand"> <div class="logo"> <a href="../index.html" alt="CanJS"></a> </div> </div> <ul class="top-right-links"> <li> <a href="https://gitter.im/canjs/canjs">Chat</a> </li> <li> <a href="http://forums.donejs.com/c/canjs">Forum</a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/canjs" data-count-href="/canjs/canjs/stargazers" data-count-api="/repos/canjs/canjs#stargazers_count">Star</a> </li> <li> <a href="https://twitter.com/canjs" class="twitter-follow-button nav-social" data-show-count="true" data-show-screen-name="false">Follow @canjs</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> </li> </ul> </div> <div class="breadcrumb"> <li><a href="../index.html">CanJS</a></li> / <li><a href="can-infrastructure.html">Infrastructure</a></li> / <li><a href="can-view-model.html">can-view-model</a></li> <li class="breadcrumb-dropdown">/ <a> On this page</a> <ul class="on-this-page"></ul> </li> <div class="nav-toggle" title="Back to top"></div> </div> </div> <div class="bottom-right"> <article> <section class="title"> <div class="page-type"> <h1>can-view-model</h1> <div>module</div> </div> <section class="description"> <p>Gets the ViewModel of an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement">element</a>.</p> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-social"> <li> <a class="npm-button" href="https://www.npmjs.com/package/can-view-model"> <img src="https://img.shields.io/badge/npm%20package-3.0.0-brightgreen.svg" alt="npm package badge" /> </a> </li> <li> <a class="github-button nav-social" href="https://github.com/canjs/can-view-model" data-count-href="/canjs/can-view-model/stargazers" data-count-api="/repos/canjs/can-view-model#stargazers_count">Star</a> </li> </ul> <ul class="title-links">  <li><a href="//github.com/canjs/can-view-model/tree/v3.0.0/can-view-model.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>canViewModel(element)</code> </h2> <p>Gets the map instance associated with <strong>element</strong>, creating one as a <a href="can-util/js/types/types.DefaultMap.html" title="">DefaultMap</a> if it doesn't already exist, and returns the map.</p> <pre><code class="language-js">var vm = canViewModel(element); </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>element</b> <code>{HTMLElement}</code>: <p>Any element in the DOM.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{<a href="can-map.html" title="Create observable objects.">can-map</a>|<a href="can-define/map/map.html" title="Create observable objects.">can-define/map/map</a>|Object}</code>: <p>The ViewModel associated with this elelement.</p> </p> </div> </div> <div class="signature"> <h2 class="signature-title"> <code>canViewModel(element, property)</code> </h2> <p>Gets the map instance associated with <strong>element</strong>, creating one as a <a href="can-util/js/types/types.DefaultMap.html" title="">DefaultMap</a> if it doesn't already exist. Then gets the <strong>property</strong> inside of the ViewModel and returns that.</p> <pre><code>var foo = canViewModel(element, "foo"); console.log(foo); // -> "bar" </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>element</b> <code>{HTMLElement}</code>: <p>Any element in the DOM.</p> </li> <li><b>property</b> <code>{String}</code>: <p>The property to get from the ViewModel.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{*}</code>: <p>The value of the property on the ViewModel or undefined if the property doesn't exist.</p> </p> </div> </div> <div class="signature"> <h2 class="signature-title"> <code>canViewModel(element, property, value)</code> </h2> <p>Gets the map instance associated with <strong>element</strong>, creating one as a <a href="can-util/js/types/types.DefaultMap.html" title="">DefaultMap</a> if it doesn't already exist. Sets the <strong>property</strong> on that map to <strong>value</strong>.</p> <pre><code class="language-js">canViewModel(element, "foo", "bar"); var foo = canViewModel(element, "foo"); console.log(foo); // -> "bar" </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>element</b> <code>{HTMLElement}</code>: <p>ANy element in the DOM.</p> </li> <li><b>property</b> <code>{String}</code>: <p>The property that is being set on the ViewModel.</p> </li> <li><b>value</b> <code>{*}</code>: <p>The value being set on the property.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{HTMLElement}</code>: <p>The element.</p> </p> </div> </div> <section class="body"> <h2>Use</h2> <p><strong>can-view-model</strong> 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 <a href="can-component.html" title="Create a custom element that can be used to manage widgets or application logic.">can-component</a> and it's associated <a href="can-component.prototype.ViewModel.html" title="Provides or describes a constructor function that provides values and methods to the component's template. The constructor function is initialized with values specified by the component element's data bindings.">ViewModel</a>.</p> <p>This shows a Component and getting its ViewModel:</p> <pre><code class="language-html"><my-tabs> ... </my-tabs> </code></pre> <pre><code class="language-js">var canViewModel = require("can-view-model"); var element = document.querySelector("my-tabs"); var vm = canViewModel(element); </code></pre> <p>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:</p> <pre><code class="language-js">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"); </code></pre> <h2>Setting an element's ViewModel</h2> <p>One thing that can-view-model does <strong><em>not</em></strong> do is provide a way to set what an element's ViewModel should be. To do that, use <a href="can-util/dom/data/data.html" title="Allows associating data as a key/value pair for a particular DOM Node. var domData = require("can-util/dom/data/data");">data</a> instead like so:</p> <pre><code class="language-js">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); </code></pre> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-view-model/can-view-model.md"},"description":"Gets the ViewModel of an [element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). \n","type":"module","title":"can-view-model","types":[{"type":"function","returns":{"types":[{"type":"undefined"}]},"params":[]}],"name":"can-view-model","parent":"can-infrastructure","package":{"_args":[[{"raw":"can-view-model@3.0.0","scope":null,"escapedName":"can-view-model","name":"can-view-model","rawSpec":"3.0.0","spec":"3.0.0","type":"version"},"/Users/kevin/dev/canjs"]],"_from":"can-view-model@3.0.0","_id":"can-view-model@3.0.0","_inCache":true,"_location":"/can-view-model","_nodeVersion":"6.7.0","_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/can-view-model-3.0.0.tgz_1476487496655_0.004655110416933894"},"_npmUser":{"name":"daffl","email":"daff@neyeon.de"},"_npmVersion":"3.10.3","_phantomChildren":{},"_requested":{"raw":"can-view-model@3.0.0","scope":null,"escapedName":"can-view-model","name":"can-view-model","rawSpec":"3.0.0","spec":"3.0.0","type":"version"},"_requiredBy":["/","/can-component","/can-jquery","/can-stache-bindings","/can-view-autorender"],"_resolved":"https://registry.npmjs.org/can-view-model/-/can-view-model-3.0.0.tgz","_shasum":"2e93504ba0d91cd4bab77d5421f63e2b1ce8a367","_shrinkwrap":null,"_spec":"can-view-model@3.0.0","_where":"/Users/kevin/dev/canjs","author":{"name":"Bitovi","email":"contact@bitovi.com","url":"http://bitovi.com"},"bit-docs":{"dependencies":{"bit-docs-glob-finder":"^0.0.5","bit-docs-dev":"^0.0.3","bit-docs-js":"^0.0.3","bit-docs-generate-readme":"^0.0.8"},"glob":{"pattern":"**/*.{js,md}","ignore":"node_modules/**/*"},"readme":{"apis":["can-view-model"]},"parent":"can-view-model"},"browser":{"transform":["cssify"]},"browserify":{"transform":["cssify"]},"dependencies":{"can-simple-map":"^3.0.0","can-util":"^3.0.1"},"description":"gets or sets the view model of an element","devDependencies":{"bit-docs":"0.0.7","can-define":"^0.6.0","can-map":"^3.0.0-pre.3","cssify":"^0.6.0","done-serve":"^0.2.0","donejs-cli":"^0.8.0","generator-donejs":"^0.9.0","jshint":"^2.9.1","steal":"^0.16.0","steal-qunit":"^0.1.1","steal-tools":"^0.16.0","testee":"^0.2.4"},"directories":{},"dist":{"shasum":"2e93504ba0d91cd4bab77d5421f63e2b1ce8a367","tarball":"https://registry.npmjs.org/can-view-model/-/can-view-model-3.0.0.tgz"},"gitHead":"648136d7da07a1cc0b2fa7cae39bd851ed823c30","homepage":"http://canjs.com","keywords":["canjs","donejs"],"main":"dist/cjs/can-view-model","maintainers":[{"name":"daffl","email":"daff@neyeon.de"},{"name":"justinbmeyer","email":"justin@bitovi.com"},{"name":"matthewp","email":"matthew@matthewphillips.info"},{"name":"phillipskevin","email":"kphillips86@gmail.com"},{"name":"sinjhin","email":"john@ardea.io"}],"name":"can-view-model","optionalDependencies":{},"readme":"ERROR: No README data found!","scripts":{"build":"node build.js","develop":"done-serve --static --develop --port 8080","document":"bit-docs","jshint":"jshint ./*.js --config","postversion":"git push --tags && git checkout master && git branch -D release && git push","preversion":"npm test && npm run build","release:major":"npm version major && npm publish","release:minor":"npm version minor && npm publish","release:patch":"npm version patch && npm publish","release:pre":"npm version prerelease && npm publish","test":"npm run jshint && npm run testee","testee":"testee test/test.html --browsers firefox","version":"git commit -am \"Update dist for release\" && git checkout -b release && git add -f dist/"},"system":{"main":"can-view-model","configDependencies":["live-reload"],"npmIgnore":["documentjs","testee","generator-donejs","donejs-cli","steal-tools"],"npmAlgorithm":"flat"},"version":"3.0.0"},"signatures":[{"code":"canViewModel(element)","description":"\n\nGets the map instance associated with **element**, creating one as a [can-util/js/types/types.DefaultMap] if it doesn't already exist, and returns the map.\n\n```js\nvar vm = canViewModel(element);\n```","params":[{"types":[{"type":"HTMLElement"}],"name":"element","description":"Any element in the DOM.\n"}],"returns":{"types":[{"type":"can-map"},{"type":"can-define/map/map"},{"type":"Object","options":[]}],"description":"The ViewModel associated with this elelement.\n"}},{"code":"canViewModel(element, property)","description":"\n\nGets the map instance associated with **element**, creating one as a [can-util/js/types/types.DefaultMap] if it doesn't already exist. Then gets the **property** inside of the ViewModel and returns that.\n\n```\nvar foo = canViewModel(element, \"foo\");\n\nconsole.log(foo); // -> \"bar\"\n```\n","params":[{"types":[{"type":"HTMLElement"}],"name":"element","description":"Any element in the DOM."},{"types":[{"type":"String"}],"name":"property","description":"The property to get from the ViewModel.\n"}],"returns":{"types":[{"type":"*"}],"description":"The value of the property on the ViewModel or undefined if the property doesn't exist.\n"}},{"code":"canViewModel(element, property, value)","description":"\n\nGets the map instance associated with **element**, creating one as a [can-util/js/types/types.DefaultMap] if it doesn't already exist. Sets the **property** on that map to **value**.\n\n```js\ncanViewModel(element, \"foo\", \"bar\");\n\nvar foo = canViewModel(element, \"foo\");\n\nconsole.log(foo); // -> \"bar\"\n```\n","params":[{"types":[{"type":"HTMLElement"}],"name":"element","description":"ANy element in the DOM."},{"types":[{"type":"String"}],"name":"property","description":"The property that is being set on the ViewModel."},{"types":[{"type":"*"}],"name":"value","description":"The value being set on the property.\n"}],"returns":{"types":[{"type":"HTMLElement"}],"description":"The element.\n"}}],"_curReturn":{"types":[{"type":"HTMLElement"}],"description":"The element.\n"},"_curParam":{"types":[{"type":"*"}],"name":"value","description":"The value being set on the property.\n"},"comment":" ","pathToRoot":".."}; </script> </article> <footer><p>CanJS is part of <a href="http://donejs.com" target="_blank">DoneJS</a>. Created and maintained by the core <a href="https://donejs.com/About.html#section=section_Team" target="_blank">DoneJS team</a> and <a href="http://bitovi.com" target="_blank">Bitovi</a>. <strong>Currently 3.0.0.</strong></p></footer> </div> </div> </div> <script> steal = { instantiated: { "bundles/bit-docs-site/static.css!$css" : null } }; </script> <script type='text/javascript' data-main="bit-docs-site/static" src="./static/node_modules/steal/steal.production.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script> </body> </html>