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

view

  • Edit on GitHub

Provides a way to render the element's innerHTML using a can-stache template.

static view = " ... ";

The view can be defined using a static class field like shown below.

<count-er></count-er>
<script type="module">
import { StacheElement } from "can/everything";
class Counter extends StacheElement {
  static view = `
      <p>Count: <span>1</span></p>
  `;
}
customElements.define("count-er", Counter);
</script>

Note: to see all the options supported by view, see can-stache.

static get view() { 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.

import { StacheElement } from "can/everything";
class Counter extends StacheElement {
  static get view() {
      return `
          <p>Count: <span>1</span></p>
      `;
  }
}

static get view = function() {};

A function can be passed as the view property. This is useful for loading views in their own files and loading them with steal-stache or similar.

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

const renderer = stache(`<p>Count: <span>1</span></p>`);

class Counter extends StacheElement {
    static view = renderer;
}

Background

StacheElement uses can-stache views. Please read stache's documentation to understand how to do things like:

  • Write values to the page
  • Branching logic
  • Looping

This page details the special abilities of an element's view that are not normally available to a generic stache view.

Use

The view property represents the innerHTML of a custom element.

There are three things to understand about an element's view:

  • Rendered with the element - The view is rendered with this as the element instance.
  • Rendered into the element's innerHTML - The rendered result of the view is inserted into the element.
  • Rendered at the right time - The view is rendered when the element is inserted into the page or when render is called for testing.

Rendered with the element

The view is rendered with this as the element instance. The following prints the age property of the element.

import { StacheElement } from "can/everything";

class Person extends StacheElement {
    static view = `
        <p>You are {{this.age}}</p>
    `;
}
customElements.define("per-son", Person);

const el = new Person();
el.age = 36;
document.body.appendChild(el);

Rendered into the element's innerHTML

The view specified by view is rendered directly within the custom element.

For example the following element:

class Greeting extends StacheElement {
    static view = `
        <h1>Hello There</h1>
    `;
}
customElements.define("my-greeting", Greeting);

With the following source html:

<header>
    <my-greeting></my-greeting>
</header>

Produces the following html:

<header>
    <my-greeting><h1>Hello There</h1></my-greeting>
</header>

If there is existing content within the source html, like:

<header>
    <my-greeting>DO REMOVE ME!!!</my-greeting>
</header>

…that content is removed and replaced by the element’s view:

<header>
    <my-greeting><h1>Hello There</h1></my-greeting>
</header>

Rendered at the right time

StacheElement handles rendering the view at the right time. In normal application use, this is done during the connectedCallback, which is called by the browser when the element is inserted into the page as part of the normal lifecycle of custom elements.

<count-er></count-er>
<script type="module">
import { StacheElement } from "can/everything";
class Counter extends StacheElement {
    static view = `
        <p>Count: <span>1</span></p>
    `;
    // Normally you do not need to implement connectedCallback
    // this is just being done for explanation purposes
    connectedCallback() {
        console.log("HTML before connectedCallback:", this.innerHTML);
        super.connectedCallback();
        console.log("HTML after connectedCallback:", this.innerHTML);
    }
}
customElements.define("count-er", Counter);
</script>

For testing purposes, the render method can be called to manually render the view. This means that the view can be tested without putting the element in the page, which greatly improves the performance of tests.

import { StacheElement } from "can/everything";
class Counter extends StacheElement {
    static view = `
        <p>Count: <span>1</span></p>
    `;
    // Normally you do not need to implement connectedCallback
    // this is just being done for explanation purposes
    connectedCallback() {
        console.log("HTML before connectedCallback:", this.innerHTML);
        super.connectedCallback();
        console.log("HTML after connectedCallback:", this.innerHTML);
    }
}
customElements.define("count-er", Counter);

const counter = new Counter();
console.log("HTML before render:", counter.innerHTML);
counter.render();
console.log("HTML after render:", counter.innerHTML);

Importing Views

The Setting Up CanJS guide has details on how to import stache views directly. For example, the following example uses import view from "./app.stache";:

import { StacheElement } from "can/everything";
import view from "./app.stache";

class MyApp extends StacheElement {
    static view = view;
    static props = {
      message: "Hello World"
    };
}
customElements.define("my-app", MyApp);

This allows:

  • authoring stache files in their own files
  • faster load times as the stache files are pre-parsed

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