can

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="utf-8"> <title>CanJS - viewModel</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=" parent expanded"> <a class="page" href="can-core.html" title="The best, most hardened and generally useful libraries in CanJS."> Core </a> <ul> <li class=" parent expanded"> <a class="module" href="can-component.html" title="Create a custom element that can be used to manage widgets or application logic."> can-component </a> <ul> <li> <span>static</span> <ul> <li class=" "> <a class="function" href="can-component.extend.html" title="Define the behavior of a custom element."> extend </a> </li> </ul> </li> <li> <span>prototype</span> <ul> <li class=" "> <a class="property" 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> </li> <li class=" "> <a class="property" href="can-component.prototype.events.html" title="Listen to events on elements and observables."> events </a> </li> <li class=" "> <a class="property" href="can-component.prototype.helpers.html" title="Helper functions used with the component's template."> helpers </a> </li> <li class=" "> <a class="property" href="can-component.prototype.leakScope.html" title="Allow reading the outer scope values from a component's template and a component's viewModel values in the user content."> leakScope </a> </li> <li class=" "> <a class="property" href="can-component.prototype.tag.html" title="Specifies the HTML tag (or node-name) the can-component will be created on."> tag </a> </li> <li class=" "> <a class="property" href="can-component.prototype.view.html" title="Provides a template to render directly within the component's element. The template is rendered with the component's can-component::ViewModel instance. <content/> elements within the template are replaced by the source elements within the component's tag."> view </a> </li> <li class="current parent expanded"> <a class="function" href="can-component.prototype.view-model.html" title="Return the view model instance or type with which the component's can-component.prototype.view is rendered. This is used when more fine grained control is needed over can-component::ViewModel."> viewModel </a> </li> </ul> </li> <li> <span>elements</span> <ul> <li class=" "> <a class="typedef" href="can-component/content.html" title="Positions the LIGHT_DOM within a component's can-component.prototype.template."> <content> </a> </li> </ul> </li> <li> <span>special events</span> <ul> <li class=" "> <a class="typedef" href="can-component/beforeremove.html" title="An event called only on component's elements before they are removed from the document if live binding is performing the removal. It can be listened to within a component's can-component.prototype.events object or on a component element with can-stache-bindings.event bindings. This is an additional special event only on component elements. inserted and removed events are available on all elements."> beforeremove </a> </li> </ul> </li> </ul> </li> <li class=" "> <a class="module" href="can-compute.html" title="Create an observable value."> can-compute </a> </li> <li class=" "> <a class="module" href="can-connect.html" title="can-connect provides persisted data middleware. Use it to assemble powerful model layers for any JavaScript project."> can-connect </a> </li> <li class=" "> <a class="module" href="can-define.html" title="Exports the define method that defines observable properties and their behavior on a prototype object."> can-define </a> </li> <li class=" "> <a class="module" href="can-define/list/list.html" title="Create observable lists."> can-define/list/list </a> </li> <li class=" "> <a class="module" href="can-define/map/map.html" title="Create observable objects."> can-define/map/map </a> </li> <li class=" "> <a class="function" href="can-route.html" title="Manage browser history and client state by synchronizing the window.location.hash with a map."> can-route </a> </li> <li class=" "> <a class="module" href="can-route-pushstate.html" title="Changes can-route to use pushstate to change the window's pathname instead of the hash. var route = require("can-route-pushstate"); route("{page}", { page: "home" }); route.ready(); route.attr("page", "user"); location.pathname; // -> "/user""> can-route-pushstate </a> </li> <li class=" "> <a class="module" href="can-set.html" title="can-set is a utility for comparing sets that are represented by the parameters commonly passed to service requests."> can-set </a> </li> <li class=" "> <a class="module" href="can-stache.html" title="Live binding Mustache and Handlebars-compatible templates."> can-stache </a> </li> <li class=" "> <a class="module" href="can-stache/helpers/route.html" title="Adds stache helpers that use can-route."> can-stache/helpers/route </a> </li> <li class=" "> <a class="module" href="can-stache-bindings.html" title="Provides template event, one-way, and two-way bindings."> can-stache-bindings </a> </li> </ul> </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=" "> <a class="page" href="can-infrastructure.html" title="Utility libraries that power the core and ecosystem collection."> Infrastructure </a> </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-core.html">Core</a></li> / <li><a href="can-component.html">can-component</a></li> / <li><a href="can-component.prototype.view-model.html">viewModel</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>viewModel</h1> <div>function</div> </div> <section class="description"> <p>Return the view model instance or type with which the component's <a href="can-component.prototype.view.html" title="Provides a template to render directly within the component's element. The template is rendered with the component's can-component::ViewModel instance. <content/> elements within the template are replaced by the source elements within the component's tag.">view</a> is rendered. This is used when more fine grained control is needed over <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> </section> </section> <section class="on-this-page-table"> </section> <section class="title-footer"> <ul class="title-links">  <li><a href="//github.com/canjs/can-component/tree/v3.0.2/docs/view-model.md">source</a></li>   </ul> </section> <div class="signature"> <h2 class="signature-title"> <code>function(properties, parentScope, element)</code> </h2> <p>The <code>viewModel</code> function takes the <code>properties</code> and values that are used to typically initialize a <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>, the <a href="can-view-scope.html" title="Create a lookup node for keys.">can-view-scope</a> the component is rendered within, and the component's element and returns either the view-model instance or ViewModel type that the component's <a href="can-component.prototype.view.html" title="Provides a template to render directly within the component's element. The template is rendered with the component's can-component::ViewModel instance. <content/> elements within the template are replaced by the source elements within the component's tag.">view</a> is rendered with.</p> <p>This is typically used only for special situations where a custom scope or custom bindings need to be setup.</p> <pre><code>var Component = require("can-component"); var Scope = require("can-view-scope"); Component.extend({ tag: "my-element", viewModel: function(properties, scope, element){ var vm = new DefineMap(properties); // do special stuff ... return vm; } }); stache("<my-element {first}='firstName' last='Meyer'/>")({ firstName: "Justin", middleName: "Barry" }); </code></pre> <div class="parameters"> <h3 class="parameters-title">Parameters</h3> <ol> <li><b>properties</b> <code>{Object}</code>: <p>An object of values specified by the custom element's attributes. For example, a template rendered like:</p> <pre><code>stache("<my-element title='name'></my-element>")({ name: "Justin" }) </code></pre> <p>Creates an instance of following control:</p> <pre><code>Component.extend({ tag: "my-element", viewModel: function(properties){ properties.title //-> "Justin"; } }) </code></pre> <p>And calls the viewModel function with <code>properties</code> like <code>{title: "Justin"}</code>.</p> </li> <li><b>parentScope</b> <code>{<a href="can-view-scope.html" title="Create a lookup node for keys.">can-view-scope</a>}</code>: <p>The viewModel the custom tag was found within. By default, any attribute's values will be looked up within the current viewModel, but if you want to add values without needing the user to provide an attribute, you can set this up here. For example:</p> <pre><code>Component.extend({ tag: "my-element", viewModel: function(properties, parentScope){ parentScope.get('middleName') //-> "Barry" } }); </code></pre> <p>Notice how the <code>middleName</code> value is looked up in <code>my-element</code>'s parent scope.</p> </li> <li><b>element</b> <code>{HTMLElement}</code>: <p>The element the <a href="can-component.html" title="Create a custom element that can be used to manage widgets or application logic.">can-component</a> is going to be placed on. If you want to add custom attribute handling, you can do that here. For example:</p> <pre><code>Component.extend({ tag: "my-element", viewModel: function(properties, parentScope, el){ var vm = new DefineMap({clicks: 0}); domEvent.addEventListener.call(el, "click", function(){ vm.clicks++; }); return vm; } }); </code></pre> <p>This example should be done with the <a href="can-component.prototype.events.html" title="Listen to events on elements and observables.">events</a> object instead.</p> </li> </ol> </div> <div class="returns"> <h3 class="returns-title">Returns</h3> <p> <code>{Map|Object}</code>: <p>Returns one of the following.</p> <ul> <li>An observable map or list type.</li> <li>The prototype of an observable map or list type that will be used to render the component's template.</li> </ul> </p> </div> </div> <section class="body"> </section> <script type="text/javascript"> var docObject = {"src":{"path":"node_modules/can-component/docs/view-model.md"},"description":"\nReturn the view model instance or type with which the component's [can-component.prototype.view]\nis rendered. This is used when more fine grained control is needed over [can-component::ViewModel].\n","title":"viewModel","name":"can-component.prototype.view-model","type":"function","parent":"can-component.prototype","signatures":[{"code":"function(properties, parentScope, element)","description":"\n\nThe `viewModel` function takes the `properties` and values that are used to\ntypically initialize a [can-component.prototype.ViewModel], the\n[can-view-scope] the component is rendered within, and the component's element\nand returns either the view-model instance or ViewModel type that the component's [can-component.prototype.view]\nis rendered with.\n\nThis is typically used only for special situations where a custom scope or custom bindings\nneed to be setup.\n\n```\nvar Component = require(\"can-component\");\nvar Scope = require(\"can-view-scope\");\n\nComponent.extend({\n\ttag: \"my-element\",\n\tviewModel: function(properties, scope, element){\n\t\tvar vm = new DefineMap(properties);\n\t\t// do special stuff ...\n\t\treturn vm;\n\t}\n});\n\nstache(\"<my-element {first}='firstName' last='Meyer'/>\")({\n firstName: \"Justin\",\n middleName: \"Barry\"\n});\n```\n","params":[{"types":[{"type":"Object","options":[]}],"name":"properties","description":"An object of values specified by the custom element's attributes. For example, a template rendered like:\n\n stache(\"<my-element title='name'></my-element>\")({\n name: \"Justin\"\n })\n\nCreates an instance of following control:\n\n Component.extend({\n \ttag: \"my-element\",\n \tviewModel: function(properties){\n \t properties.title //-> \"Justin\";\n \t}\n })\n\nAnd calls the viewModel function with `properties` like `{title: \"Justin\"}`.\n"},{"types":[{"type":"can-view-scope"}],"name":"parentScope","description":"\n\nThe viewModel the custom tag was found within. By default, any attribute's values will\nbe looked up within the current viewModel, but if you want to add values without needing\nthe user to provide an attribute, you can set this up here. For example:\n\n Component.extend({\n \ttag: \"my-element\",\n \tviewModel: function(properties, parentScope){\n \t parentScope.get('middleName') //-> \"Barry\"\n \t}\n });\n\nNotice how the `middleName` value is looked up in `my-element`'s parent scope.\n"},{"types":[{"type":"HTMLElement"}],"name":"element","description":"The element the [can-component] is going to be placed on. If you want\nto add custom attribute handling, you can do that here. For example:\n\n Component.extend({\n \ttag: \"my-element\",\n \tviewModel: function(properties, parentScope, el){\n\t\t var vm = new DefineMap({clicks: 0});\n \t domEvent.addEventListener.call(el, \"click\", function(){\n\t\t vm.clicks++;\n\t\t });\n\t\t return vm;\n \t}\n });\n\nThis example should be done with the [can-component::events] object instead.\n"}],"returns":{"types":[{"type":"Map"},{"type":"Object","options":[]}],"description":"Returns one of the following.\n\n - An observable map or list type.\n - The prototype of an observable map or list type that will be used to render the component's template.\n"}}],"_curParam":{"types":[{"type":"HTMLElement"}],"name":"element","description":"The element the [can-component] is going to be placed on. If you want\nto add custom attribute handling, you can do that here. For example:\n\n Component.extend({\n \ttag: \"my-element\",\n \tviewModel: function(properties, parentScope, el){\n\t\t var vm = new DefineMap({clicks: 0});\n \t domEvent.addEventListener.call(el, \"click\", function(){\n\t\t vm.clicks++;\n\t\t });\n\t\t return vm;\n \t}\n });\n\nThis example should be done with the [can-component::events] object instead.\n"},"_curReturn":{"types":[{"type":"Map"},{"type":"Object","options":[]}],"description":"Returns one of the following.\n\n - An observable map or list type.\n - The prototype of an observable map or list type that will be used to render the component's template.\n"},"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>