DoneJS StealJS jQuery++ FuncUnit DocumentJS
3.14.1
5.0.0 4.3.0 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-compute
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-stream
      • can-define-stream-kefir
      • can-event
      • can-event/async/async
      • can-event/batch/batch
      • can-event/lifecycle/lifecycle
      • can-kefir
      • can-list
      • can-map
      • can-map-backup
      • can-map-define
      • can-observation
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
    • Data Modeling
      • can-connect
      • can-connect-cloneable
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-signalr
      • can-fixture
      • can-fixture-socket
      • can-ndjson-stream
      • can-set
    • Views
      • can-component
      • can-ejs
      • can-element
      • can-react-component
      • can-stache
      • can-stache/helpers/route
      • can-stache-bindings
      • can-stache-converters
      • can-view-autorender
      • can-view-callbacks
      • can-view-href
      • 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-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-globals
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-string
      • can-string-to-any
      • can-util
      • can-zone
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-control
      • can-dom-events
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-jquery
    • 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-namespace
      • can-reflect
      • 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

can-view-autorender

  • npm package badge
  • Star
  • Edit on GitHub

A module that automatically renders script and other elements with the can-autorender attribute. This function is useful to know when the templates have finished rendering.

autorender(success, error)

Registers functions to callback when all templates successfully render or an error in rendering happens.

Parameters

  1. success {function}:

    A function to callback when all autorendered templates have been rendered successfully.

  2. error {function}:

    A function to callback if a template was not rendered successfully.

Use

As long is this module is part of your CanJS build or imported with RequireJS, StealJS, or SystemJS, can-view-autorender will automatically look for can-autorender tags and render them. Once all templates have finished rendering, it will call any callbacks passed to can.autorender().

Note: Although can-autorender works on all HTML elements, using elements other than script tags will result in all attribute names being lowercased by the browser. This can cause can-stache-bindings to not work properly, so you should use <script> tags if your autorender content contains bindings.

For example, you might have a page like:

<body>
  <script type='text/stache' can-autorender id='main'
    message="Hello World">
    <my-component>
      {{message}}
    </my-component>
  </script>

  <script src='jquery.js'></script>
  <!-- A CanJS build that includes this plugin -->
  <script src='can.all.js'></script>
  <!-- All your app's code and components -->
  <script src='app.js'></script>
  <script>
    // Wait until everything has rendered.
    can.autorender(function(){

      // Update the viewModel the template was rendred with:
      $("#main").viewModel().attr("message","Rendered!");

    })
  </script>
</body>

Rendered placement

If the template source is a <script> tag within the <body>, the rendered template is placed immediately following the template.

For example:

<body>
  <script type='text/stache' can-autorender message="Hi">
    {{message}}!
  </script>
  <div>...</div>
</body>

Becomes:

<body>
  <script type='text/stache' can-autorender message="Hi">
    {{message}}!
  </script>
  Hi!
  <div>...</div>
</body>

If the <script> tag is outside the body, for example in the <head> tag, the rendered result will be placed just before the closing </body> tag.

For example:

<head>
  <script type='text/stache' can-autorender message="Hi">
    {{message}}!
  </script>
</head>
<body>
  <div>...</div>
</body>

Becomes:

<head>
  <script type='text/stache' can-autorender message="Hi">
    {{message}}!
  </script>
</head>
<body>
  <div>...</div>
  Hi!
</body>

If the template source is any other element, the element's contents will be replaced with the rendered result. For example:

<body>
  <div type='text/stache' can-autorender message="Hi">
    {{message}}!
  </div>
</body>

Becomes:

<body>
  <div type='text/stache' can-autorender message="Hi">
    Hi!
  </div>
</body>

Scope

The template is rendered with a [can.Map] made from the attributes of the template source element. That map is available on the template source element via [can.viewModel]. You can change the map at any time:

<body>
  <script type='text/stache' can-autorender id='main'>
    {{message}}!
  </script>
  <script>
    var viewModel = can.viewModel(document.getElementById("main"));
    viewModel.attr("message","Hello There!");
  </script>
</body>

You can change attributes on the element and it will update the viewModel too:

<body>
  <script type='text/stache' can-autorender id='main'>
    {{message}}!
  </script>
  <script>
    var main = document.getElementById("main");
    main.setAttribute("message","Hello There!");
  </script>
</body>

StealJS Use

For demo pages that require very little setup:

<body>
  <script type='text/stache'>
    <can-import from="components/my-component"/>
    <my-component>
      {{message}}
    </my-component>
  </script>
  <script src='../node_modules/steal/steal.js'
          main='can/view/autorender/'>
  </script>
</body>

For demo pages that require a little custom setup:

<body>
  <script type='text/stache' can-autorender>
    <can-import from="components/my-component"/>
    <my-component>
      {{message}}
    </my-component>
  </script>
  <script src='../node_modules/steal/steal.js'
          main='@empty'>
  </script>
  <script>
    steal('can','jquery','can/view/autorender/', function(can, $){
      $("my-component").viewModel().attr("message", "Hi");
    });
  </script>
</body>

Errors

Error callbacks will be called if a template has a parsing error or a [can/view/stache/system.import] fails.

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

On this page

Get help

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