Jquery plugin crashing stache updates

CanJS
1

I am using cycle2, a jquery plugin that turns a bunch of divs containing images or video into a rotating slideshow with transitions. The initial load of the stache template loads fine, from a list of slides (can.List). But after the plugin loads it alters the dom and I guess confuses the stache updater so it can’t find the list anymore and does not update. When I remove the plugin, it updates as expected.

sign.stache

<div id="slideshows">
{{#each ./slideshows}}
	<div {$id}="id" {$class}="classes" {$style}="parseCSS('slideshow', cssrule)" data-cycle-slides="> div" >
	{{#each slides}}
		<div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition">
		{{#eq type 'video'}}
			<video id="video-{{id}}" {$src}="localUrl(id, url, 'media/s')" type="video/mp4" />
		{{else}}
			<img id="img-{{id}}" {$src}="localUrl(id, url, 'media/s')" />
		{{/eq}}
		</div>
	{{/each}}
	</div>
{{/each}}
</div>

rendered HTML without the plugin:

<div id="slideshows">
	<div {$id}="id" {$class}="classes" {$style}="parseCSS('slideshow', cssrule)" data-cycle-slides="> div" id="Slide" class="" style="position: absolute; top: 0px; left: 0px; width: 1920px; height: 1080px;">
		<div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" id="56e5d8ced86784e8638b4567" data-cycle-timeout="5000" data-cycle-fx="fade">
			<img {$src}="localUrl(id, url, 'media/s')" id="img-56e5d8ced86784e8638b4567" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Sky_1280.jpg">
		</div>
		<div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" id="56e5d801d867844f628b4567" data-cycle-timeout="10026.667" data-cycle-fx="fade">
			<video {$src}="localUrl(id, url, 'media/s')" type="video/mp4" id="video-56e5d801d867844f628b4567" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Test1.mp4"></video>		
		</div>
		<div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" id="56e5d818d867845f628b4567" data-cycle-timeout="10048" data-cycle-fx="fade">
			<video {$src}="localUrl(id, url, 'media/s')" type="video/mp4" id="video-56e5d818d867845f628b4567" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Test2.mp4"></video>		
		</div>
	</div>
</div>

with plugin:

<div id="slideshows">
   <div {$id}="id" {$class}="classes" {$style}="parseCSS('slideshow', cssrule)" data-cycle-slides="> div" id="Slide" class="cycle-slideshow" style="position: absolute; top: 0px; left: 0px; width: 1920px; height: 1080px;">
        <div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" data-cycle-timeout="5000" data-cycle-fx="fade" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;" class="cycle-slide cycle-sentinel">
		<img {$src}="localUrl(id, url, 'media/s')" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Sky_1280.jpg" style="visibility: hidden;">
	</div>
	<div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" id="56e5d8ced86784e8638b4567" data-cycle-timeout="5000" data-cycle-fx="fade" style="position: absolute; top: 0px; left: 0px; z-index: 100; opacity: 0; display: block; visibility: hidden;" class="cycle-slide">
			<img {$src}="localUrl(id, url, 'media/s')" id="img-56e5d8ced86784e8638b4567" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Sky_1280.jpg">
	</div>
        <div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" id="56e5d801d867844f628b4567" data-cycle-timeout="10026.667" data-cycle-fx="fade" style="position: absolute; top: 0px; left: 0px; z-index: 99; visibility: visible; opacity: 1; display: block;" class="cycle-slide cycle-slide-active">
			<video {$src}="localUrl(id, url, 'media/s')" type="video/mp4" id="video-56e5d801d867844f628b4567" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Test1.mp4"></video>		
		</div>
        <div {$id}="id" {$data-cycle-timeout}="duration(props.duration)" {$data-cycle-fx}="props.transition" id="56e5d818d867845f628b4567" data-cycle-timeout="10048" data-cycle-fx="fade" style="position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden;" class="cycle-slide">
			<video {$src}="localUrl(id, url, 'media/s')" type="video/mp4" id="video-56e5d818d867845f628b4567" src="http://dev.menuboardmanager.com/wp-content/plugins/menuboard-manager/app/public/mediaStorage/dovid/gallery/Test2.mp4"></video>		
	</div>
   </div>
</div>

notice the addition of the additional hidden div with the cycle-sentinel class.

Is there anyway around this? Or will I need to scrap the plugin? If so, how can I create the slideshow effect using stache directives and functions? I could do something like <img {$id}="currentSlide.id" {$src}="currentSlide.url" /> with timeouts in the viewmodel to update currentSlide, but then I would lose the transition effects.

2

I would scrap can.stache / can.Component and use a can.Control`` that wraps the plugin. That plugin can listen to changes in yourcan.List` and update the DOM manually and the tell your plugin to re-evaluate the DOM.

can.stache doens’t like it when the HTML is changed. There’s a way to change it safely, but you’d have to change the plugin code.

3

There’s the can-animate plugin that is supposed to help stache trigger animations.

4

thanks @justinbmeyer, could you explain this a bit more? Scrap stache for the whole Sign component or just the slideshow part? How would I embed that in the larger stache template (either sign.stache or index.stache) or are you saying make the updates directly in the index.html?

I guess related to that, I have a logging module, that currently uses stache and a List. But I was thinking that maybe that is unnecessary since I don’t really need binding. I just need to log the messages to a div and forget about them. So perhaps I also should just directly append to a div with jQuery instead of using the vdom with stache updates?