SammyJS json store demo: cómo crear una ventana emergente de producto modal?

Question

¿Alguien tiene un ejemplo de hacer que los detalles del producto de la demo de la tienda SammyJS json aparezcan en un plugin modal como FancyBox?

Aquí está el bloque de código de la tienda json: ¿qué debo hacer para presentarlo en un modelo FancyBox?

this.get('#/item/:id', function(context) { 
    this.item = this.items[this.params['id']]; 
    if (!this.item) { return this.notFound(); } 
    this.partial('templates/item_detail.template'); 
}); 

Answer 1

es probable que desee utilizar RenderContext render() método de Sammy:

this.get('#/item/:id', function(context) { 
    this.item = this.items[this.params['id']]; 
    if (!this.item) { return this.notFound(); } 
    this.render('templates/item_detail.template').then(function(content) { 
    $.fancybox({ 
     content: content, 
     // set box size to fit the product details 
     autoDimensions: false, 
     width: 800, 
     height: 500 
    }); 
    }); 
}); 

EDITAR Como ha señalado @drozzy la barra de direcciones se siguen cambiar con este método. Para evitar este comportamiento tendremos que interceptar el clic en el enlace que se debe abrir la ventana emergente y explícitamente iniciar la ruta de Sammy:

$(document).delegate("a[href^=#/item/]", "click", function(linkElement) { 

    // Determine and explicitly start Sammy's route for the clicked link 
    var path = linkElement.currentTarget.href.replace(/^[^#]*/, ""); 
    Sammy('#main').runRoute('get', path); 

    // cancel the default behaviour 
    return false; 
}); 

Tenga en cuenta que este ejemplo se utiliza un selector de enlaces con rutas que comienzan con #/item/ a juego. Si esto no es lo suficientemente específico, probablemente debería ser algo más adecuado, p. clases de marcadores

(Esto utiliza jQuery 1.4.3, tal como se utiliza en la demo JSON tienda.)

Answer 2

El código del archivo de plantilla que se parece a:

<div class="item-detail"> 
    <div class="item-image"><img src="<%= item.large_image %>" alt="<%= item.title %>" /></div> 
    <div class="item-info"> 
     <div class="item-artist"><%= item.artist %></div> 
     <div class="item-title"><%= item.title %></div> 
     <div class="item-price">$<%= item.price %></div> 
     <div class="item-link"><a href="<%= item.url %>">Buy this item on Amazon</a></div> 
     <div class="back-link"><a href="#/">&laquo; Back to Items</a></div> 
    </div> 
</div> 

por lo que podría apuntar el enlace en div.item-enlace para abrirlo es href en FancyBox como:

var $link = $('div.item-link a'); 
$link.fancybox({href:$link.attr('href')}); 

Eso debería hacer el truco.