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
        • Tags
          • {{expression}}
          • {{{expression}}}
          • {{#expression}}
          • {{/expression}}
          • {{else}}
          • {{<partialName}}
          • {{!expression}}
          • {{-expression-}}
        • Helpers
          • and
          • console
          • debugger
          • domData
          • eq
          • for(of)
          • portal
          • if
          • joinBase
          • let
          • not
          • or
          • switch
          • case
          • default
        • Expressions
          • Bracket Expression
          • Call Expression
          • Hash Expression
          • KeyLookup Expression
          • Literal Expression
        • Methods
          • addBindings
          • addConverter
          • addHelper
          • addLiveHelper
          • from
          • safeString
        • Key Operators
          • ~compute
          • ./current
          • ../parent
          • scope
          • scope/key
          • this
          • key
        • Pages
          • Expressions
          • Helpers
        • Types
          • getterSetter
          • helper
          • helperOptions
          • sectionRenderer
          • simpleHelper
          • view
        • Deprecated
          • Helper Expression
          • scope.vars
          • {{data name}}
          • {{#each(expression)}}
          • {{#is(expressions)}}
          • {{#unless(expression)}}
          • {{#with(expression)}}
          • registerConverter
          • registerHelper
          • registerPartial
          • Legacy Scope Behavior
          • {{^expression}}
          • {{>key}}
      • can-stache-bindings
      • can-stache-converters
      • can-stache-element
      • 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

{{expression}}

  • Edit on GitHub

Insert the value of the expression into the output of the template.

{{EXPRESSION}}

Gets the value of EXPRESSION and inserts the escaped result into the output of the template.

If the expression is clearly of a particular expression type like {{ myMethod(arg) }}, that expression’s rules will be followed.

import {stache} from "can";

var view = stache(`<div>{{ this.value }}</div>`);

var fragment = view({value: "<script src='evil.com'>"});

console.log(fragment.firstChild.innerHTML) //-> &lt;script src='evil.com'&gt;
document.body.append(fragment);

Parameters

  1. expression {Literal Expression|KeyLookup Expression|Call Expression|Helper Expression}:

    The expression can be:

    • Literal Expression - {{ 5 }} - Inserts a string representation of the literal.
    • KeyLookup Expression - {{ key }} - Looks up the value of key in the can-view-scope.
    • Call Expression - {{ method() }} - Calls method in the can-view-scope.
    • view - {{ view(data) }} - Calls a view renderer function with data and inserts the result.

Returns

{Primitive|Node|Object|function}:

Depending on what the expression evaluates to, the following happens:

  • null, undefined - inserts the empty string.
  • String, Number, Boolean - inserts the string representation of the value.
  • Function - Calls the function back with a textNode placeholder element.
  • Node, Element - Inserts the HTML into the page.
  • An object with the can.toDOM symbol - Inserts the result of calling the can.toDOM symbol. This is how safeString works.
  • An object with the can.viewInsert - Calls the can.viewInsert function with tagData and inserts the result.

Use

{{expression}} inserts the value returned by the expression. To understand how a particular expression works, please read that expression's documentation:

  • Literal Expression - {{ 5 }}
  • KeyLookup Expression - {{ key }}
  • Call Expression - {{ method() }}

This documentation focuses on how {{expression}} handles the result of that expression.

Inserting primitives

Inserting elements

DOM elements and nodes returned will be inserted in the page.

import {stache, fragment} from "//unpkg.com/can@5/core.mjs";

var view = stache(`<div>{{ this.h1("Hello World") }}</div>`);

var frag = view({
    h1(text) {
        return fragment("<h1>"+text+"</h1>")
    }
});

console.log(frag.firstChild.innerHTML) //-> <h1>Hello World</h1>
document.body.append(frag);

Inserting functions

If a function is returned, that function is called back with a placeholder text node:

import {stache, domMutate} from "can";

var view = stache(`<div>{{ this.blink("Hello There") }}</div>`);

var fragment = view({
    blink(text) {
        return function(placeholderElement) {
            var interval = setInterval(function(){
                placeholderElement.nodeValue = placeholderElement.nodeValue === text ?
                    "" : text;
            },500);
            domMutate.onNodeRemoval(placeholderElement, function(){
                console.log("element removed");
                clearInterval(interval);
            });

        }
    }
});

document.body.append(fragment);

setTimeout(function(){
    document.body.innerHTML = "CLEARED";
},2000);

Inserting objects with can.toDOM

If an object has a can.toDOM symbol property, that property's value will be called, the result passed to can-fragment, and the result of can-fragment will be inserted.

import {stache} from "//unpkg.com/can@5/core.mjs";

var view = stache(`<div>{{ helloWorld }}</div>`);

var fragment = view({
    helloWorld: {
        [Symbol.for("can.toDOM")]() {
            return "<h1>Hello World</h1>";
        }
    }
});

console.log(fragment.firstChild.innerHTML) //-> <h1>Hello World</h1>
document.body.append(fragment);

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