steal-autorender

0.8.0 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i steal-autorender

Weekly Downloads

1

Version

0.8.0

License

MIT

Last publish

Collaborators

  • frank-dspeed