Context of Javascript in stache template

CanJS
1

I just found out I can embed javascript <script> /* javascript here */ </script> in a stache template, which I’m using to initialize a 3rd party class on a component.

I’d also like to pass a variable to the script that is executing. For example:

<!-- myfile.stache -->
<div id="someid"></div>

<p>{{testProp}}</p>

<script>
var a = '{{view.title}}';
console.log(a); // prints out '{{view.title}}'
</script>

I realize there’s a few other ways to accomplish what I’m trying to do, but this way would work well for my current situation with the 3rd party library. Is this a possiblility? Or does stache simply not parse the javascript for potential mustache tags?

2

What’s the benefit of putting this third party code in .stache, instead of the component .js file?

I might be off, but I think you could maybe do something like:

export default Component.extend({
  ...
  events: {
    inserted(el, ev) {
      var a = view.title;
      console.log(a);
    }
  }
});

I’m not sure I understand what benefit you would get from having your JavaScript in the template.

3

Good question, I could definitely wrap this javascript in a component and use the inserted event, you’re right.

But this javascript code I’m using in the stache template is very specific to only one instance of my app and it doesn’t make sense to create a component/template/viewModel for it, IMO.

Basically I have a component (I think you’ve seen it) - data-admin that has a list view, a details view, etc. Each view has a template (renderer) that can be overridden depending on what type of object I’m viewing. Like: view.listTemplate. This renderer gets rendered using the stache partial syntax.
https://github.com/roemhildtg/spectre-canjs/blob/master/data-admin/template.stache#L3

So for the case I’m describing above, I want to run a bit of javascript on that particular view.

I suppose I could add additional properties to the data-admin view, like onListShow (function) etc. Does this make more sense?