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

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演示中使用.)