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

Omit whitespace from around the output of the template.

{{-EXPRESSION-}}

Whitespace may be omitted from either or both ends of a magic tag by including a - character by the braces. When present, all whitespace on that side will be omitted up to the next tag, magic tag, or non-whitespace character. It also works with {{{expression}}}.

The following ensures there is no extra whitespace between the second <pre>, the output of {{-this.message-}}, and the </pre> closing tag:

<my-demo></my-demo>
<style>
pre {border: solid 1px;}
</style>
<script type="module">
import {StacheElement} from "can";

class MyDemo extends StacheElement {
  static view = `
    <pre>
      {{this.message}}
    </pre>
    <pre>
      {{- this.message -}}
    </pre>
  `;

  static props = {
    message: "Hi There!"
  };
}

customElements.define("my-demo", MyDemo);
</script>

Parameters

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

    An expression whose unescaped result is inserted into the page.

{{--}}

Whitespace may be omitted without an expression. This is useful between html tags, for example, where it may cause issues in the display of static inline elements.

The following ensures there is no extra whitespace between the inline items:

<my-demo></my-demo>
<style>
.slantycolors {
  display: inline-block;
  transform: skewX(15deg);
  padding: 10px;
  color: white;
  font-weight: bold;
  background: linear-gradient(to top, orange, black, blue);
}
</style>
<script type="module">
import {StacheElement} from "can";

class MyDemo extends StacheElement {
  static view = `
    <span class="slantycolors">
      orange
    </span>
    {{--}}
    <span class="slantycolors">
      black
    </span>
    {{--}}
    <span class="slantycolors">
      blue
    </span>
    <span class="slantycolors">
      {{message}}
    </span>
  `;

  static props = {
    message: "There's no {{--}} before me."
  };
}

customElements.define("my-demo", MyDemo);
</script>

Examples

Basic Usage

<div>
    {{-# if(user.isMarried) -}}
        Mrs
    {{- else -}}
        Miss
    {{-/ if -}}
</div>

would render as:

<div>{{# if(user.isMarried) }}Mrs{{ else }}Miss{{/ if }}</div>

and

<div>
    {{{- toMarkdown(content) -}}}
</div>

would render as:

<div>{{{ toMarkdown(content) }}}</div>

Span Elements

One use case is to remove spaces around span elements.

<div>
    <span>
        {{-# if(user.isMarried) -}}
            Mrs.
        {{- else -}}
            Miss.
        {{-/ if -}}
    </span>
    {{- user.name }}
</div>

would render as:

<div>
    <span>{{#if(user.isMarried)}}Mrs.{{else}}Miss.{{/if}}</span>{{ user.name }}
</div>

Empty Elements

Another would be to assure that empty elements are able to match the :empty css pseudo-class (the whitespace that would be otherwise present prevents this), while still being cleanly formatted for human consumption.

<div>
    {{-! output the users name }}
    {{-# if(user.name) }}
        {{ user.name }}
    {{/ if -}}
</div>

would render as:

<div>{{-! output the users name }}{{-# if(user.name) }}
        {{ user.name }}
    {{/ if -}}</div>

Special Case

You may want to remove all whitespace between elements without output or comment.

<ul>
 {{--}}
 <li>Inline Nav Item 1</li>
 {{--}}
 <li>Inline Nav Item 2</li>
 {{--}}
</ul>

would render as:

<ul><li>Inline Nav Item 1</li><li>Inline Nav Item 2</li></ul>

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