Question

是否有人举例说明SammyJS json商店演示的产品详情是否出现在FancyBox这样的模态插件中？

以下是json商店的代码块 - 我需要做什么才能在模型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

您可能想要使用Sammy的RenderContext render()方法：

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
    });
  });
});

修改正如@drozzy所指出的，位置栏仍会随着这种方法而改变。要解决此问题，我们需要拦截应该打开弹出窗口并明确启动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; });

请注意，此示例使用选择器匹配带有以#/item/开头的路径的链接。如果这不够具体，那么应该更合适一些，例如：标记类。

（这使用jQuery 1.4.3，在JSON Store演示中使用。）

Answer 2

该模板文件中的代码如下所示：

<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>

所以你可以在div.item-link中定位链接，在fancybox中打开它的href，如：

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

这应该可以解决问题。

SammyJS json商店演示 - 如何创建模态产品弹出窗口？

2 个答案: