Question

I am trying to create the following behaviour with my Sammy-driven application:

The image describes a gallery-view, and is created through Sammy and the templating framework Handlebars. Each element has the following template:

<article class="gallery-item">
    <img src="{{url_thumb}}" alt="{{title}}" id="image-{{id}}" />
</article>

The burgundy colored square to the left (2) is supposed to show the large version of it’s pink twin to the left.

How do I wire up the event so that when I click an element with class ´gallery-item´, the image on the right is changed?

Answer 1

If you structure the application as presented in this blog post: mvc med sammy og handlebars. You would make a gallery-item view, and a gallery view. The gallery view would contain the gallery item views and a preview view for the image on the left side. It would then need to attach an click event listener with help of for example jQuery.

Something like this:

var that = this;
$(".gallery-item").on(function(e) {
   that.previewView.showImage("send in the url to the image that where clicked on, 
   or a model containing the url or whatever you like!:)");
}

For more information on how jQuery:on works, check out jQuery API:ON