DoneJS StealJS jQuery++ FuncUnit DocumentJS
4.3.0
5.0.0 3.13.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-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-define
      • can-observation
      • can-observation-recorder
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
      • can-value
    • Data Modeling
      • can-connect
      • can-connect-feathers
      • can-fixture
      • can-fixture-socket
      • can-ndjson-stream
      • can-set
    • Views
      • can-component
      • can-stache
        • Pages
          • Magic Tag Types
          • Scope and Context
          • Expressions
          • Template Acquisition
          • Helpers
          • Live Binding
          • Whitespace Control
          • Sections
        • Methods
          • addBindings
          • addHelper
          • addLiveHelper
          • from
          • registerConverter
          • registerHelper
          • registerPartial
          • safeString
        • Tags
          • {{expression}}
          • {{{expression}}}
          • {{#expression}}
          • {{/expression}}
          • {{^expression}}
          • {{>key}}
          • {{!expression}}
          • {{<partialName}}
          • {{else}}
        • Expressions
          • Bracket Expression
          • Call Expression
          • Hash Expression
          • Helper Expression
          • KeyLookup Expression
          • Literal Expression
        • Key Operators
          • ~compute
          • ./current
          • ../parent
          • scope
          • this
          • key
        • Helpers
          • {{#if(expression)}}
          • {{#unless(expression)}}
          • {{#each(expression)}}
          • {{#with(expression)}}
          • console methods
          • {{debugger()}}
          • {{#eq(expressions)}}
          • {{#is(expressions)}}
          • {{#switch(expression)}}
          • {{#case(expression)}}
          • {{#default()}}
          • {{domData(expression)}}
          • {{joinBase(expressions)}}
        • Types
          • getterSetter
          • helper
          • helperOptions
          • renderer
          • sectionRenderer
          • simpleHelper
      • can-stache-bindings
      • can-stache-converters
      • can-stache-route-helpers
      • can-view-autorender
      • can-view-callbacks
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • react-view-model
      • react-view-model/component
      • steal-stache
    • 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-util
      • can-zone
      • 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-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

sectionRenderer

  • Edit on GitHub

Renders a section. These functions are usually provided as .fn and .inverse on a stache helper’s options.

function(context, helpers)

Parameters

  1. context {*|can-view-scope}:

    Specifies the data the section is rendered with. If a can-view-scope is provided, that scope is used to render the section. If anything else is provided, it is used to create a new scope object with the current scope as its parent. If nothing is provided, the current scope is used to render the section.

  2. helpers {*|can-view-scope.Options}:

    Specifies the helpers the section is rendered with. If a [can-view-scope.Options] is provided, that scope is used to render the section. If anything else is provided, it is used to create a new scope object with the current helper scope as its parent. If nothing is provided, the current helper scope is used to render the section.

Returns

{documentFragment|String}:

Returns the rendered result of the helper. If the section is within a tag, like:

<h1 {{#helper}}class='power'{{/helper}}>

a String is returned.

If the section is outside a tag like:

<div> {{#helper}}<h2>Tasks</h2>{{/helper}} </div>

a documentFragment is returned.

Use

Renderer functions are provided to stache helpers on the options argument and are used to render the content between sections. The context and helpers option let you control the data and helpers used to render the section.

The following example adds {first: "Justin"} to the lookup data. Notice how the section has access to first and last.

stache.registerHelper( "myhelper", function( options ) {
    const section = options.fn( { first: "Justin" } );
    return $( "<h1>" ).append( section );
} );

const template = stache(
    "{{#myHelper}}{{first}} {{last}}{{/myHelper}}" );

template( { last: "Meyer" } ); //-> <h1>Justin Meyer</h1>

If no context is provided, the current context is passed. Notice how the section has access to last:

stache.registerHelper( "myhelper", function( options ) {

    const section = options.fn();
    return $( "<h1>" ).append( section );

} );

const template = stache(
    "{{#myHelper}}{{first}} {{last}}{{/myHelper}}" );

template( { last: "Meyer" } ); //-> <h1> Meyer</h1>

If a can-view-scope is provided, it is used to render the section. Notice how last is not available in the section:

stache.registerHelper( "myhelper", function( options ) {

    const section = options.fn( new Scope( { first: "Justin" } ) );
    return $( "<h1>" ).append( section );

} );

const template = stache(
    "{{#myHelper}}{{first}} {{last}}{{/myHelper}}" );

template( { last: "Meyer" } ); //-> <h1>Justin </h1>

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

On this page

Get help

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