How to use the can.stache function in can

To help you get started, we’ve selected a few can examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github canjs / canjs / demos / can-component / tabs.html View on Github external
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({
github canjs / canjs / demos / can-component / tabs.html View on Github external
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
github canjs / canjs / view / stache / insert_benchmark.html View on Github external
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}}");
github canjs / canjs / component / examples / paginate_next.html View on Github external
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("")({}));
github canjs / canjs / demos / technology-overview / route-counter.html View on Github external
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) );
github canjs / canjs / demos / technology-overview / route-counter-registered.html View on Github external
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>
github canjs / canjs / demos / can-component / my_greeting_full.html View on Github external
{{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"}));

github canjs / canjs / demos / can-component / paginate_events_next.html View on Github external
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({}));
github canjs / canjs / component / examples / paginate_events_next_update_page.html View on Github external
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("")({}))