Skip to content

Instantly share code, notes, and snippets.

@sszabolcs

sszabolcs/ CanJS 3 memory test

Last active March 21, 2017 13:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sszabolcs/3eb7cc415e18c64cb88a8dcd0002732b to your computer and use it in GitHub Desktop.
Save sszabolcs/3eb7cc415e18c64cb88a8dcd0002732b to your computer and use it in GitHub Desktop.
Download ZIP
Code for investigating CanJS 3 for a possible memory leaking situation
Raw
index_canjs2.html
<!DOCTYPE html>
<html>
<head>
<title>CanJS 2.0 memory test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script type="text/stache" id="my-component">
value of test property: {{testProperty}}
</script>
<script type="text/stache" id="content-using-my-component">
<div id="my-component-container" />
{{#if myCompInserted}}
<a ($click)="removeMyComp()" href="javascript://">Remove</a>
{{else}}
<a ($click)="insertMyComp()" href="javascript://">Insert</a>
{{/if}}
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://canjs.com/release/latest/can.jquery.js"></script>
<script src="https://canjs.com/release/latest/can.map.define.js"></script>
<script src="https://canjs.com/release/latest/can.stache.js"></script>
<script src="memory_test_canjs2.js"></script>
</body>
</html>
Raw
index_canjs3.html
<!DOCTYPE html>
<html>
<head>
<title>CanJS 3.0 memory test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script type="text/stache" id="my-component">
value of test property: {{testProperty}}
</script>
<script type="text/stache" id="content-using-my-component">
<div id="my-component-container" />
{{#if myCompInserted}}
<a ($click)="removeMyComp()" href="javascript://">Remove</a>
{{else}}
<a ($click)="insertMyComp()" href="javascript://">Insert</a>
{{/if}}
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://unpkg.com/can/dist/global/can.all.js"></script>
<script src="memory_test_canjs3.js"></script>
</body>
</html>
Raw
memory_test_canjs2.js
"use strict";
var MyComponentVM = can.Map.extend({
define: {
testProperty: {
value: "init test property value"
}
}
});
can.Component.extend({
tag: "my-component",
template: can.view("#my-component"),
viewModel: MyComponentVM
});
var myCompRenderer = can.stache("<my-component />");
var TestVM = can.Map.extend({
myCompInserted: false,
insertMyComp: function () {
var myCompFrag = myCompRenderer();
$("#my-component-container").html(myCompFrag);
this.attr("myCompInserted", true);
},
removeMyComp: function () {
$("#my-component-container").empty();
this.attr("myCompInserted", false);
}
});
var template = can.view("#content-using-my-component");
var frag = template(new TestVM());
document.body.appendChild(frag);
Raw
memory_test_canjs3.js
"use strict";
var MyComponentVM = can.DefineMap.extend({
testProperty: { type: "string", value: "init test property value" }
});
can.Component.extend({
tag: "my-component",
view: can.stache.from("my-component"),
ViewModel: MyComponentVM
});
var myCompRenderer = can.stache("<my-component />");
var TestVM = can.DefineMap.extend({
myCompInserted: { type: "boolean", value: false },
insertMyComp: function () {
var myCompFrag = myCompRenderer();
$("#my-component-container").html(myCompFrag);
this.myCompInserted = true;
},
removeMyComp: function () {
$("#my-component-container").empty();
this.myCompInserted = false;
}
});
var template = can.stache.from("content-using-my-component");
var frag = template(new TestVM());
document.body.appendChild(frag);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment