can/demos/can-debug/log-what-changes-map.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<div id="out"></div>

<script id="demo-html" type="text/stache">
<button id="btn-log">canDebug.logWhatChangesMe</button>
</script>

<style>
	#btn-log {
		color: white;
		font-size: 100%;
		padding: .5em 1em;
		border-radius: 4px;
		text-decoration: none;
		background: rgb(66, 184, 221);
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	}
</style>

<script id="demo-source" main="@empty" src="../../node_modules/steal/steal.js" dev-bundle>
import { DefineMap, debug, stache } from "can";

const canDebug = debug();

const Person = DefineMap.extend("Person", {
	first: "string",
	last: "string",
	fullName: {
		get: function() {
			return this.first + " " + this.last;
		}
	}
});

const me = new Person({ first: "John", last: "Doe" });

// The observable must be bound for `logWhatChangesMe` to work correctly.
me.on("fullName", function() {});

const out = document.getElementById("out");
const template = stache.from("demo-html");

out.appendChild(template({}));
out.addEventListener("click", function(ev) {
	const el = ev.target;
	const parent = el.parentNode;
	if (el.nodeName === "BUTTON") {
		canDebug.logWhatChangesMe(me, "fullName");
	}
});
</script>