Weston: A new templating engine for CanJS apps

CanJS
1

Hello everyone. A few months back I got the urge to try and do templating using the <template> element and fix some of the problems I find with Stache. Since CanJS 3.0 has opened up several APIs that stache uses, this turned out to be quite easy to do.

weston is my new project that provides an alternative templating engine based on the <template> tag. Please check out the readme to learn more, as it goes into greater detail on my motivations and explains some of the limitations it currently has.

CanJS 3.0 rocks because it makes creating your own templating engine super simple!

1 Like
2

My thoughts…

  1. Nice job, good to how easy it is to use canjs API.
  2. Like that simple, “what you see is what you get” approach. That legacy concerns of the stache syntax should be removed in the future.

Dislikes:

  • not another tamplate engine
  • that “template” tag and the idea to put the partial on the Dom. The website will show the raw template and thats looks wired. Use SSR or a loading screen seems for me the better solutions,
1 Like
3

Thanks! To be clear, <template> and its children do not appear to the user. The browser treats its contents as inert. This means, for example, you can have images inside of a template and the browser won’t begin downloading them. And again, they aren’t visible in the page.

Two big advantages to use <template> over a string-based templating language like stache are:

  • <template>s can be nested. You can have templates inside of templates. This is nice as a way to pass a template to a component. Script tags can’t be nested.
  • You don’t need to do your own parsing with <template>, the browser’s HTML parses turns them into nodes for you. template.content is a DocumentFragment.
1 Like
4

Can you fall back to mustach within template. I suppose you can with custom element.

5

@janat08 What do you mean by mustache? Weston’s templates are mustache-like, but they are not the same as stache. You can use weston templates in some components and stache components in others. Note that weston hasn’t been upgraded to work with canjs@4, I’m not sure if I’ll ever do that (as I don’t use weston personally). If there were enough demand I might.

6

I asked that it get’s adopted in issue about making mustache like JS until JSX, https://github.com/canjs/can-stache/issues/528.