JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.view.mustache.js"></script>
<body>
<script type="text/mustache" id="example">
{{own_prop}} ; {{constructor.static_prop}} ; wrong: {{constructor.proto_prop}}
<br>
{{print_positional own_prop ";" constructor.static_prop "; wrong: " constructor.proto_prop}}
<br>
{{print_hash own=own_prop "; right:"=constructor.static_prop "; wrong"=constructor.proto_prop}}
</script>
</body>
JavaScript
$(function() {
can.Map.extend("can.Foo", { static_prop : "baz" }, { proto_prop : "thud" });
Mustache.registerHelper("print_positional", function() {
return can.map(
can.makeArray(arguments).slice(0, arguments.length - 1)
, function(arg) {
while(arg && arg.isComputed) {
arg = arg();
}
return arg;
}
).join(" ");
});
Mustache.registerHelper("print_hash", function() {
var ret = [];
can.each(
arguments[arguments.length - 1].hash
, function(arg, key) {
while(arg && arg.isComputed) {
arg = arg();
}
ret = ret.concat([key, ":", arg]);
}
);
return ret.join(" ");
});
var obj = new can.Foo({
own_prop : "quux"
});
can.view("#example", obj, function(frag) {
$(document.body).append("1. Pushing redraws whole list<br>Actual: ").append(frag);
$("span").text("bar");
$(document.body).append("<br>Expected: Text: \"bar\" Text: \"bar\" Text: \"foo\"").append(frag);
/* $(document.body).append("<br>Should be: \"" + obj.attr("next_level.text") + "\"");
$(document.body).append("<br><br>2. After deferred resolves and attr changes, mustaches render incorrectly<br>");
can.view("#example", obj, function(frag) {
$(document.body).append(frag);
} );
*/
})
});