Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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("")({}))