Automatically render to the body or html element
JavaScript HTML
Latest commit 509f5d5 Jun 3, 2016 @matthewp matthewp Merge pull request #30 from donejs/update-readme
Update the readme
Permalink
Failed to load latest commit information.
src
test
.editorconfig
.gitignore
.travis.yml
README.md
build.js
package.json

README.md

Build Status npm version

done-autorender

Automatically renders a template, either to the <html> or <body> elements.

Install

Install with NPM and use with StealJS:

npm install done-autorender --save

Use

done-autorender enables you to use a Stache template as your application entry-point (the main). done-autorender will wait for your page to be fully loaded (including all dependencies) and then will insert the template into the <head> and <body>. For example:

index.stache

<html>
<head>
  <title>My Site</title>
</head>
<body>
  <can-import from="main.css"/>
  <can-import from="routes"/>
  <can-import from="state" export-as="viewModel"/>

  {{#eq page "home"}}

    <can-import from="home/">
      {{#if isResolved}}
        <home-page></home-page>
      {{/if}}
    </can-import>

  {{/eq}}
</body>
</html>

index.html

<script src="node_modules/steal/steal.js" main="index.stache!done-autorender"></script>

Then load index.html in a browser. After all dependencies are loaded your index.stache will be rendered and inserted into the page.

API

ViewModel

Each done-autorender application is backed by a viewModel that represents the state of the entire application.

This viewModel is an instance of a can.Map. To import this ViewModel into your application use a can-import tag like so:

<can-import from="app/state" export-as="viewModel"/>

This tells done-autorender that the module app/state is the ViewModel.

Debugging

Often in development (such as in your dev tools console) you will want to have access to the Application ViewModel to inspect it's values. You can access it with:

$("html").viewModel(); // -> AppViewModel