Component & stache file structure

CanJS
1

When migrating from v2.3 to v3 and trying to keep a similar neat component-based folder and file structure (as per the old tutorial), how do we load data from the stache file? We previously used can.view to load the template file but with can.stache this isn’t supported? Maybe I’m missing something?

I’ve got a new separate component js file, is it best to include the stache template directly in the component view as per the below example as this doesn’t seem as neat as before.

Component({
  tag: "my-tabs",
view: stache("<ul>{{#panels}}<li>{{title}}</li> ...")
});

An alternative is the below method but where do we load the stache file in this instance so that it sits neatly with the component?

stache.from("my-template");

Thanks,
Paul

2

If you are using StealJS to load your modules, you should use steal-stache to load your templates.

3

thanks @phillipskevin

We aren’t using steal and are loading Can from the CDN. Is there recommended way to load components in this scenario? I’ll investigate using StealJS and steal-stache though if that’s the way to go.

4

@phillipskevin can correct me on this, but I think the recommended way to load template files is through your module loader.

For StealJS, that’d be using steal-stache: http://canjs.com/doc/steal-stache.html

For webpack, something like this: https://github.com/chasenlehara/canjs-webpack-example/blob/master/main.js#L5

…etc.

@pauldjackson, are you using a module loader for your files, or just <script> tags?

5

Thanks @chasen. Sorry I should have mentioned that, we’re just using <script> tags.

6

You can simply use the fetch API https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch to get the stache template raw data

7

We should have better documentation on this. I created an issue for improving the migration guide: https://github.com/canjs/canjs/issues/2991

If someone has the time to pick it up, please just assign it to yourself, otherwise I’ll try to get to it this week.