canjs | javascript interpreter , which can run JS code | Interpreter library

The issue has been fixed by renaming the CanJS control function "Map". If in widget.html

what you need is a viewport metatag, so viewport scales with your screensize

This issue seems specific to the @arcgis/webpack-plugin, I suggest opening an issue over there that links back here: https://github.com/Esri/arcgis-webpack-plugin/issues

A key element with using transitions on changing data is that the transition has to complete before removing the element from the DOM (which would remove the element from display immediately).

As far as I know, CanJS doesn't have a mechanism to wait for a process before removal of nodes, so the appropriate workaround is to have a node that isn't removed when content changes. You can structure your markup inside of that node, but the Velocity transition has to happen on the permanent node to make the transition successful.

For the example of fading in and fading out, setting the content to put inside the transition container should use an async setter (with val and resolve arguments) to make the transition work correctly. First fade out (and use the returned promise to wait), then update the markup with the new content (using resolve()), then fade in. I made a JSBin that demonstrates this concept, though the content inside the transition is very simple in the demo.

https://jsbin.com/lesagebomu/edit?html,js,output

In the case of a quizz-question component, you'd want to render the whole component inside of the div in fade-in. There's probably also a way to generalize this into a higher-order component using e.g.

Because DefineMap's are sealed by default, and you likely want independent throttling with respect to individual instances of ViewModel, you want to do it like this:

The solution :

The can-connect object must be in a closure :

can.stache returns a renderer function, so you need to call it in order to correctly create a document fragment.

I think changing this: $('#can-bindings').append(can.stache(''));

to: $('#can-bindings').append(can.stache('')());

in each of the places where you're trying to render templates should solve your problem.

A static file server was my solution to this problem. Don't load all the files as file://, probably this does not work in FF, too (in Chrome you get a cross-origin requests not allowed for local files-like message).

I just configured a NGINX in order to serve the files for this little project, now it works perfectly.

Sidenote: Adding a custom tag like to the index.html does not work in this case. Instead you need to append this element (a can.Component) to the body like this: