DoneJS StealJS jQuery++ FuncUnit DocumentJS
6.0.1
5.33.2 4.3.0 3.14.1 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-bind
      • can-compute
      • can-debug
      • can-deep-observable
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-backup
      • can-define-stream
      • can-define-stream-kefir
      • can-event-queue
      • can-kefir
      • can-list
      • can-map
      • can-map-compat
      • can-map-define
      • can-observable-array
      • can-observable-object
      • can-observation
      • can-observation-recorder
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
      • can-value
    • Views
      • can-attribute-observable
      • can-component
      • can-observable-bindings
      • can-stache
      • can-stache-bindings
      • can-stache-converters
      • can-stache-element
        • static
          • view
          • props
        • lifecycle methods
          • connectedCallback
          • initialize
          • render
          • connect
          • disconnectedCallback
          • disconnect
          • bindings
        • lifecycle hooks
          • connected
          • disconnected
      • can-stache-route-helpers
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-model
      • can-view-parser
      • can-view-scope
      • can-view-target
      • steal-stache
    • Data Modeling
      • can-connect
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-tag
      • can-define-realtime-rest-model
      • can-define-rest-model
      • can-fixture
      • can-fixture-socket
      • can-local-store
      • can-memory-store
      • can-ndjson-stream
      • can-query-logic
      • can-realtime-rest-model
      • can-rest-model
      • can-set-legacy
      • can-super-model
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-hash
      • can-route-mock
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-diff
      • can-globals
      • can-join-uris
      • can-key
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-queues
      • can-string
      • can-string-to-any
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-child-nodes
      • can-control
      • can-dom-data
      • can-dom-events
      • can-dom-mutate
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-fragment
    • Data Validation
      • can-define-validate-validatejs
      • can-type
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-data-types
      • can-namespace
      • can-reflect
      • can-reflect-dependencies
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

props

  • Edit on GitHub

A static property used to create ObservableObject-like properties on each StacheElement instance.

static props = { ... };

To manage the logic and state of an element, ObservableObject-like property definitions can be added to explicitly configure how an element's properties are defined.

To add property definitions, add a static class field like shown below.

import { StacheElement } from "can/everything";

class TodoItem extends StacheElement {
    static props = {
        name: String,
        completed: false
    };
}
customElements.define("todo-item", TodoItem);

const todo = new TodoItem()
    // `initialize` must be called for properties to be set up
    .initialize({ name: "go grocery shopping" });

todo.name; // -> "go grocery shopping"
todo.completed; // -> false

Note: to see all the options supported by props, see can-observable-object.

static get props() { return { ... }; }

For browsers that do not support class fields (and applications not using a transpiler), properties can be defined using a static getter like shown below.

class TodoItem extends StacheElement {
    static get props() {
        return {
            name: String,
            completed: false
        };
    }
}
customElements.define("todo-item", TodoItem);

Note: to see all the options supported by props, see can-observable-object.

Use

Defining a property using a shorthand or definition object is a great way to encapsulate the logic and state of an element's properties.

Among other things, this can be used to create

  • typed properties using type checking or type conversion
  • declarative, derived properties
  • required properties

These are discussed below and the full set of options can be found in the ObservableObject documentation.

Typed properties

Typed properties can be used to ensure that the value of an element's property is the expected type. Types are strict by default, but type conversion is also available for properties that do not need to be stricty typed through methods like type.maybe, type.convert, and others.

The following example...

import { StacheElement, type } from "can/everything";

class Person extends StacheElement {
    static view = `
        <p>{{first}}</p>
        <p>{{last}}</p>
        <p>{{age}}</p>
        <p>{{birthday}}</p>
    `;
    static props = {
        first: String,
        last: type.maybe(String),
        age: type.convert(Number),
        birthday: type.maybeConvert(Date)
    };
}
customElements.define("per-son", Person);

let fib = new Person({
    first: "Fibonacci",
    last: null,
    age: "80",
    birthday: undefined
});

document.body.appendChild(fib);

Declarative properties

Declarative properties can be used to create properties that functionally derive their value from other property values. There are many options for creating declarative properties, including getters, asynchronous properties, and even techniques similar to event streams and functional reactive programming.

The following example shows a few examples of declarative properties:

<per-son></per-son>
<script type="module">
import { StacheElement } from "can/everything";

class Person extends StacheElement {
    static view = `
        <p>First: <input value:bind="first"></p>
        <p>Last: <input value:bind="last"></p>
        <p>Full Name: {{fullName}}</p>
        <p>Name Changes: {{nameChangeCount}}</p>
    `;
    static props = {
        first: "Kevin",
        last: "McCallister",
        get fullName() {
            return `${this.first} ${this.last}`;
        },
        nameChangeCount: {
            value({ listenTo, resolve }) {
                let count = resolve(0);
                listenTo("fullName", () => {
                    count = resolve(count++);
                });
            }
        }
    };
}
customElements.define("per-son", Person);
</script>

Required properties

Required properties ensure that if an element is instantiated without a value for that property, an error will be thrown.

In the following example, an error is thrown because the <to-do> element is instantiated without a name property. To prevent this, the element should be created with a value for name like <to-do name:raw="Go Shopping" />.

<to-do></to-do>
<script type="module">
import { StacheElement } from "can/everything";

class Todo extends StacheElement {
    static props = {
        name: { type: String, required: true }
    };
}
customElements.define("to-do", Todo);
</script>

For all of the options available for defining properties, see the ObservableObject documentation.

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 6.0.1.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news