How to use the can.stache function in can

view:
		stache("<ul>"+
			// Create an LI for each item in the panel's viewModel object
    		"{{#each(panels, panel=value)}}"+
    			"<li>"+
    			  "{{panel.title}}"+
    			"</li>"+
    		"{{/each}}"+
    	"</ul>"+
    	"<content></content>"),
	ViewModel: ViewModel
});

Component.extend({
	view: stache("{{#if(active)}}<content></content>{{/if}}"),
	tag:"my-panel",
	ViewModel: Panel
});

const foodTypes = new DefineList([
	{title: "Fruits", content: "oranges, apples"},
	{title: "Breads", content: "pasta, cereal"},
	{title: "Sweets", content: "ice cream, candy"}
]);
window.foodTypes = foodTypes;

const template = stache(demoHtml);
const fragment = template({
	foodTypes: foodTypes,
	addVegies: function(){
		foodTypes.push({

panel.active = false;
		});
		panel.active = true;

	},
	// this is viewModel, not mustache
	// consider removing viewModel as arg
	isActive: function( panel ) {
		return this.active === panel;
	}
});

Component.extend({
	tag: "my-tabs",
	view:
		stache("<ul>"+
			// Create an LI for each item in the panel's viewModel object
    		"{{#each(panels, panel=value)}}"+
    			"<li>"+
    			  "{{panel.title}}"+
    			"</li>"+
    		"{{/each}}"+
    	"</ul>"+
    	"<content></content>"),
	ViewModel: ViewModel
});

Component.extend({
	view: stache("{{#if(active)}}<content></content>{{/if}}"),
	tag:"my-panel",
	ViewModel: Panel

var template = can.stache("<ul>"+
		"{{#each tasks}}"+
			"<li class="{{#if completed}}completed{{/if}}">"+
				"{{name}}"+
			"</li>"+
		"{{/each}}"+
	"</ul>");

	var tasks = new can.List([
			{name: "Mow lawn", completed: false},
			{name: "Walk dog", completed: true}
		]);

	var frag = template({tasks: tasks});

	var template = can.stache("<ul>...</ul>"),
	tasks = new can.List([
		{name: "Do dishes", completed: false},
		{name: "Walk dog", completed: true}
	]),
	frag = template({tasks: tasks});

	var template = stache(
		"{{#each boxes}}"+
			"<div class="box-view">"+
				"<div style="top: {{top}}px; left: {{left}}px; background: rgb(0,0,{{color}});" id="box-{{number}}" class="box">"+
					"{{content}}"+
				"</div>"+
			"</div>"+
		"{{/each}}");

var can = require('can');
require('can/view/stache/stache');

can.Component.extend({
  tag: "my-paginate",
  viewModel: {
    offset: 0,
    limit: 20,
    next: function(){
      this.attr("offset", this.offset + this.limit);
    },
    page: function(){
      return Math.floor(this.attr('offset') / this.attr('limit')) + 1;
    }
  },
  template: can.stache("Page {{page}} <button>Next</button>")
});

$("#out").html(can.stache("")({}));

default: 0,
        type: "number",
        set(newValue){
            return newValue || 0;
        }
    },
    increment() {
        this.count++;
    }
});

window.myCounter = new Counter();
route.data = myCounter;
route.start();

const view = stache(`
  <button>+1</button>
  Count: <span>{{ count }}</span>
`);

document.body.appendChild( view(myCounter) );

const Counter = DefineMap.extend({
    count: { default: 0, type: "number" },
    increment() {
        this.count++;
    }
});

window.myCounter = new Counter();

route.data = myCounter;
route.register("{count}");
route.register("",{count: 0});
route.start();

const view = stache(`
  <button>+1</button>
  Count: <span>{{ count }}</span>
`);

document.body.appendChild( view(myCounter) );

<style></style>

{{site}}
  
`;

Component.extend({
	tag: "my-greeting",
	view: stache("<h1><content> - {{title}}</content></h1>"),
	ViewModel: DefineMap.extend({
		title: {
			default: "can-component"
		}
	})
});

const template = stache(demoHtml);
document.querySelector('#out').appendChild(template({site: "CanJS"}));

default: 20
	},
	page: {
		get: function(){
			return Math.floor(this.offset / this.limit) + 1;
		}
	},
	next: function(){
		this.offset = this.offset + this.limit;
	}
});

Component.extend({
	tag: "my-paginate",
	ViewModel: ViewModel,
	view: stache(demoHtml),
	events: {
		".next click": function(){
			this.viewModel.next();
		}
	}
});

const template = stache("");
document.getElementById("out").appendChild(template({}));

var can = require('can');
require('can/view/stache/stache');

can.Component.extend({
  tag: "my-paginate",
  viewModel: {
    offset: 0,
    limit: 20,
    next: function(){
      this.attr("offset", this.offset + this.limit);
    },
    page: function(){
      return Math.floor(this.attr('offset') / this.attr('limit')) + 1;
    }
  },
  template: can.stache("Page <span>1</span> <button class="next">Next</button>"),
  events: {
  	".next click": function(){
  	  this.viewModel.next();
   },
   "{scope} offset": function(){
   	  this.element.find("span").text( this.viewModel.page() )
   }
  }
})

$("#out").html(can.stache("")({}))